Question

jquery左侧导航展开收起，单击时只能显示一个菜单，其他的都隐藏起来。

<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>
这是页面代码，帮我看下到底哪里出错了？

Answer 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

追问

嗯。你说的对，不过页面结构是不能改的，是平级的，不好意思，我忘记说了。

追答

好的我在重写下

追问

麻烦你了。。。

追答

<script type="text/javascript">
$(function(){
$("#mymenu dd").hide();
$("#mymenu dt").click(function(event) {
var index = $("#mymenu dt").index(this);
var objList = [];
var tmpDD = $("#mymenu dt").eq(index).next();
while(tmpDD.length>0 && tmpDD.get(0).tagName == 'DD'){
       objList.push(tmpDD);
       tmpDD = tmpDD.next();
    }
    var display = $(objList[0]).css('display');
       if(display == 'none') {
       $("#mymenu dd").hide();
       $(objList).each(function() {
       $(this).show();
       });
       }else{
       $(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>

终于弄出来了 - -

追问

太厉害了。谢谢！