jQuery菜单树，向上/下滑动

Question

我正在尝试创建一个jQuery Dropdow菜单，到目前为止，运行良好。除了您只能打开文件夹/树，不再关闭它们。我想我必须在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/teddyrises/2y9fz/ （添加了更多列表项目以证明效果）

Answer 2

利用 slideToggle(); 代替 slideDown();, ，这将使之能够根据当前方向执行滑动或滑动。

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 格式化，以 ulS内部 liS，而不是他们是兄弟姐妹。 IE <li><ul><li></li></ul></li> 代替 <li></li><ul><li></li></ul>.

放小提琴： http://jsfiddle.net/filever10/gml4x/