求解下 Jquery纵向菜单

页面代码   <body> 
<ul>
<li class="menubar1"> 
<a href="#">菜单项1</a> 
</ul> 
</li> 
<li class="menubar"> 
<a href="#">菜单项2</a> 
<ul class="menu_body"> 
<li> 
<a href="#">子菜单项21</a> 
</li> 
<li> 
<a href="#">子菜单项22</a> 
</li> 
</ul class="menu_body"> 
</li> 
<li class="menubar"> 
<a href="#">菜单项3</a> 
<ul class="menu_body"> 
<li> 
<a href="#">子菜单项31</a> 
</li> 
<li> 
<a href="#">子菜单项32</a> 
</li> 
</ul> 
</li> 
</ul> 
</body> CSS代码ul, li { 
/*清除ul和li上默认的小圆点*/ 
list-style: none; 
} 
ul { 
/*清除子菜单的缩进值*/ 
padding: 0; 
margin: 0; 
} 
.menubar { 
width: 137px; 
} 
li { 

} 
a { 
/*取消所有的下划线*/ 
text-decoration: none; 
padding-left: 30px; 
display: block; 
display: inline-block; 
width: 100px; 
padding-top: 3px; 
padding-bottom: 3px;} 
.menubar a{ 
color: #ffffff;
background: url(../images/menu.jpg);  
background-repeat: no-repeat; 
background-position: 3px center;
}.menubar1 a{ 
color: #ffffff;
background: url(../images/menu.jpg);  
background-repeat: no-repeat; 
background-position: 3px center;
} .menubar li a{ 
color: black;
background-image: none;
} 
.menubar ul{ 
display: none; 
} Jquery代码$(document).ready(function(){ 
$(".menubar > a").click(function(){ 
 $(this).next(".menu_body").slideToggle(600).siblings(".menu_body").slideUp("slow");    
changeIcon($(this)); 
}); 
}); 
/** 
* 修改主菜单的指示图标 
*/ 
function changeIcon(mainNode) { 
if (mainNode) { 
if (mainNode.css("background-image").indexOf("menu.jpg") >= 0) { 
mainNode.css("background-image","url('images/menu_line.jpg')"); 
} else { 
mainNode.css("background-image","url('images/menu.jpg')"); 
} 
} 
} 我现在已经可以点击菜单2的时候展开在次点击的时候收缩 
但是为什么没能实现 当菜单2展开点击菜单3的时候 菜单2收缩 菜单3展开

解决方案 »

  1.   

    楼主你的html标签处问题了吧 你镶套的 没出错？？？
      

  2.   

    更改的页面代码
    <body> 
    <ul>
    <li class="menubar1"> 
    <a href="#">菜单项1</a> 
    </li> 
    <li class="menubar"> 
    <a href="#">菜单项2</a> 
    <ul class="menu_body"> 
    <li> 
    <a href="#">子菜单项21</a> 
    </li> 
    <li> 
    <a href="#">子菜单项22</a> 
    </li> 
    </ul> 
    </li> 
    <li class="menubar"> 
    <a href="#">菜单项3</a> 
    <ul class="menu_body"> 
    <li> 
    <a href="#">子菜单项31</a> 
    </li> 
    <li> 
    <a href="#">子菜单项32</a> 
    </li> 
    </ul> 
    </li> 
    </ul> </body> 
      

  3.   

    只需要在展开当前栏目的子栏目时加个判断，判断其他栏目这个时候的状态也就是ul的display是否为显示是的话隐藏就可以了！你那边不好写的话我写给你吧
      

  4.   


    $(".menubar > a").each(function(i){
    $(this).click(function(){ $(this).next(".menu_body").slideToggle(600);
    changeIcon($(this)); $(".menubar > a").not($(".menubar > a")[i]).next(".menu_body").slideUp("slow");
    });
    });这样应该可以了吧，把当前的子菜单slidetoggle，用not过滤条件把其他的子菜单全部slideUp
      

  5.   


    $(document).ready(function() {
        $(".menubar > a").click(function() {
            //$(this).next(".menu_body").slideToggle(600).siblings(".menu_body").slideUp("slow");
    var otherCon = $(".menu_body")
    for(i=0;i<otherCon.length;i++){
    otherCon.eq(i).slideUp(500)
    $(this).next(".menu_body").slideDown(500)
    }
            changeIcon($(this));
        });
    });刚刚吃完饭了，好了你看看吧！如果想在次点击当前的时候收缩起来那你加个判断就可以了