1

第一次在这里发帖，但我在研究时总是先来这里。无论如何，我到处搜索，找不到解决问题的可靠方法。这是问题所在，我使用 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>

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

4

2 回答 2

1

您可以向上滑动单击元素兄弟的所有子元素：

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

这样你就不需要知道点击的元素是否是一个topnavorsubnav元素，它会<ul>根据需要支持尽可能多的嵌套

演示

于 2013-03-27T15:12:25.303 回答
0

尝试

$(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');
    });
});

演示：小提琴

于 2013-03-27T15:09:46.780 回答