Question

我正在尝试创建一个jQuery下拉菜单，到目前为止它工作正常。除了你只能打开文件夹/树，不要再关闭它们。我想我必须在jQuery中使用EQ或兄弟姐妹？但不幸的是，我不知道如何将它们组合在一起 - 有人能表现出来吗？：）

<ul class="nav">
    <li><a href="#">Test link</a></li>
    <ul class="nav">
        <li>Test under</li>
    </ul>
</ul>

jQuery(document).ready(function(){
    jQuery('.nav ul').css('display', 'none');

    jQuery('.nav li').click(function(){
        jQuery(this).find('ul:first').slideDown(); 
    })

})

//西蒙

Answer 1

您的标记存在语法错误 - <ul>元素的唯一有效直接后代是<li>。如果要嵌套列表，请在<li>本身内执行：

<ul class="nav">
    <li>
        <a href="#">Test link</a>
        <ul class="nav">
            <li>Test under</li>
        </ul>
    </li>
</ul>

对于切换，我们只是指示搜索同级<ul>元素，并在点击链接时对其应用.slideToggle()方法：

$(function() {
    // Hide submenus
    $(".nav ul").hide();

    // Toggle nested <ul> (siblings of the link)
    $(".nav > li > a").click(function(e) {
        $(this).siblings("ul").slideToggle();
        e.preventDefault();
    });
});

这是一个演示小提琴：http://jsfiddle.net/teddyrised/2y9fz/（添加更多列表项以证明效果）

Answer 2

使用slideToggle();代替slideDown();，这将使其执行slideDown或slideUp，具体取决于当前的方向。

Answer 3

这应该有帮助

每个部分都有标签，因此很容易理解。除了使用slideToggle之外，这更加清楚和深思熟虑。相反，它创建了应该明显向上或向下滑动的情况，并在选择另一个分支时恢复先前的分支。

$('.nav ul').each(function () {
    $(this).on('click', function(e) {
        e.stopPropagation();//ignore ul clicks
    }).parent().on('click', function () {//target only parents of a ul
        if($(this).hasClass('on')) {//if selected
            $(this).addClass('on').children('ul').slideUp();//slideup
        } else {//if not selected
            if($(this).parent('.nav')) {//if start of branch
                $(this).parent().find('.on').removeClass('on').find('ul').slideUp();//close other branches
            }
            $(this).addClass('on').children('ul').slideDown();//slideDown
        }
    });
});

它是递归的，它只针对li个孩子的ul。当您选择其他分支时，它还将还原先前打开的分支。我删除了anchor代码，因为操作位于click，示例中的链接没有任何位置。如果它没有去任何地方，为什么它需要一个链接？

它还修复了html格式，将ul放在li内，而不是兄弟姐妹。 ie <li><ul><li></li></ul></li>而不是<li></li><ul><li></li></ul>。

做了一个小提琴：http://jsfiddle.net/filever10/gmL4x/

jQuery菜单树，向上/向下滑动

3 个答案: