![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
jquery左侧导航展开收起,单击时只能显示一个菜单,其他的都隐藏起来。
<scripttype="text/javascript">$(function(){$("#mymenudd").hide();$("#mymenudt").each(...
<script type="text/javascript">
$(function(){
$("#mymenu dd").hide();
$("#mymenu dt").each(function(){
var dt = $(this);
var objList =new Array();
var tmpDD = dt.next();
while(tmpDD.attr("tagName")!=null && tmpDD.attr("tagName")!="DT")
{objList.push(tmpDD);
tmpDD = tmpDD.next(); }
dt.toggle(
function(){
$(this).parent().children('dd').hide();
$(objList).each(function(){
$(this).show();
});
},
function(){
$(this).parent().children('dd').show();
$(objList).each(function(){
$(this).hide();
});
});
});
})
</script>
<div id="mymenu">
<dl>
<dt><a href="#">点击我</a></dt>
<dd class="aaa"><a href="#">用户查询</a></dd>
<dd class="aaa"><a href="#">添加用户</a></dd>
<dd class="aaa"><a href="#">用户组</a></dd>
<dt><a href="#">点击我</a></dt>
<dd class="aaa"><a href="#">课程列表</a></dd>
<dd class="aaa"><a href="#">添加课程</a></dd>
</dl>
</div>
这是页面代码,帮我看下到底哪里出错了? 展开
$(function(){
$("#mymenu dd").hide();
$("#mymenu dt").each(function(){
var dt = $(this);
var objList =new Array();
var tmpDD = dt.next();
while(tmpDD.attr("tagName")!=null && tmpDD.attr("tagName")!="DT")
{objList.push(tmpDD);
tmpDD = tmpDD.next(); }
dt.toggle(
function(){
$(this).parent().children('dd').hide();
$(objList).each(function(){
$(this).show();
});
},
function(){
$(this).parent().children('dd').show();
$(objList).each(function(){
$(this).hide();
});
});
});
})
</script>
<div id="mymenu">
<dl>
<dt><a href="#">点击我</a></dt>
<dd class="aaa"><a href="#">用户查询</a></dd>
<dd class="aaa"><a href="#">添加用户</a></dd>
<dd class="aaa"><a href="#">用户组</a></dd>
<dt><a href="#">点击我</a></dt>
<dd class="aaa"><a href="#">课程列表</a></dd>
<dd class="aaa"><a href="#">添加课程</a></dd>
</dl>
</div>
这是页面代码,帮我看下到底哪里出错了? 展开
1个回答
展开全部
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#mymenu dt').click(function(event) {
var dd = $(this).next('div');
var display = dd.css('display');
if (display == 'none') {
$("#mymenu div").hide().eq($('#mymenu dt').index(this)).show();
}else{
dd.css('display','none');
}
});
})
</script>
<div id="mymenu">
<dl>
<dt>
<a href="#">点击我</a>
</dt>
<div style="display:none">
<dd class="aaa"><a href="#">用户查询</a></dd>
<dd class="aaa"><a href="#">添加用户</a></dd>
<dd class="aaa"><a href="#">用户组</a></dd>
</div>
<dt><a href="#">点击我</a></dt>
<div style="display:none">
<dd class="aaa"><a href="#">课程列表</a></dd>
<dd class="aaa"><a href="#">添加课程</a></dd>
</div>
</dl>
</div>
其实不用那么麻烦的,加个div包含在里面就好控制多了
望采纳 Thx
更多追问追答
追问
嗯。你说的对,不过页面结构是不能改的,是平级的,不好意思,我忘记说了。
追答
好的我在重写下
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询