Question

第一次在这里发帖，但我总是在研究时首先来到这里。无论如何，我到处搜索，无法找到解决问题的可靠方法。这是问题，我用jQuery 1.9.1和slideToggle函数创建了一个垂直滑动菜单。我在一个jsFiddle http://jsfiddle.net/JWaXM/1/

中加了一个例子

<li class="topnav"><a href="#">ITEMS LIST 1</a>
<ul>
    <li class="subnav">ITEM 1
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
    <li class="subnav">ITEM 2
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
 </ul>
</li>

<li class="topnav"><a href="#">ITEMS LIST 2</a>
<ul>
    <li class="subnav">ITEM 1
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
    <li class="subnav">ITEM 2
        <ul>
            <li>List subitem 1</li>
            <li>List subitem 2</li>
        </ul>
    </li>
 </ul>
</li>

<script type="text/javascript">
$(document).ready(function(){
$(".topnav, .subnav").click(function(event){
 event.stopPropagation();
 $(this).children("ul").slideToggle();
});
});
</script>

菜单效果很好，但是当我打开另一个菜单时，我需要弄清楚如何关闭上一个子菜单。另外，我需要一种方法来区分父母和孩子，以便知道关闭topnav或subnav。我是整个jQuery的新手，但我正在慢慢学习。感谢您的帮助，我很感激。

Answer 1

您可以向上滑动所点击的元素兄弟姐妹的所有孩子：

$(this).siblings().children('ul').slideUp();

这样您就不需要知道点击的元素是topnav还是subnav元素，并且它将根据需要支持尽可能多的嵌套<ul>

Demo

Answer 2

尝试

$(document).ready(function(){
    $(".topnav, .subnav").click(function(event){
        event.stopPropagation();
        $(this).closest('ul').find('.active').stop().slideToggle().removeClass('active');
        $(this).children("ul").slideToggle().addClass('active');
    });
});

演示：Fiddle

关闭jQuery菜单中的先前项目

2 个答案: