嵌套的jquery手风琴菜单

时间:2014-05-26 09:12:32

标签: jquery html css

我现在面临嵌套手风琴的问题。

demo:http://jsfiddle.net/cyber007/baUH8/ ..一级手风琴很好,现在我也需要第二级。喜欢

<li class='has-sub'><a href='#'><img src="images/icon-2.png" />General Setting<i>Protocol Utilization</i></a>
    <ul>
    <li><a href='#'><span>Widgets</span></a></li>
    <li class='has-sub'><a href='#'><span>Menus</span></a>
        <ul>
          <li><a href='#'><span>test 3rd</span></a></li>
          <li><a href='#'><span>test 3rd</span></a></li>
          <li class='last'><a href='#'><span>test 3rd</span></a></li>
    </ul>
</li>

我想在添加的html中添加菜单下的另一个手风琴,但它不起作用。你能告诉我怎么做吗?

2 个答案:

答案 0 :(得分:2)

检查此功能是否符合您想要的功能

Javascript:

$(document).ready(function() {
    $('.sidebar ul li a').click(function(ev) {
        $('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp();
        $(this).next('.sub-menu').slideToggle();
        ev.stopPropagation();
    });
});

Demo

您的代码已在此处编辑请检查Demo

答案 1 :(得分:1)

Working result

点击选择器更改为$('#cssmenu a')

内部ul <ul class='innerLevel'>

中添加了一个类

检查它是否是打开内部菜单slideUp prev开放菜单的请求

if (!$(checkElement).hasClass('innerLevel')) {
    $('#cssmenu ul ul:visible').slideUp('normal');
}  

不是一个完美的解决方案。建议将不胜感激。

希望它有所帮助...