0

我正在尝试创建一个 jQuery 下拉菜单，到目前为止它工作正常。除了您只能打开文件夹/树，不能再次关闭它们。我想我必须在 jQuery 中使用 EQ 或 Siblings？但不幸的是，我不知道如何将它们放在一起 - 有人可以展示吗？:)

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

})

//西蒙

4

3 回答 3

2

<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/（添加了更多列表项来演示效果）

于 2013-11-07T00:12:14.187 回答
1

这应该有帮助

每个部分都有标签，所以很容易理解。这比仅使用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标签，因为该操作是 on click，并且示例中的链接没有去任何地方。如果它不去任何地方，为什么它需要一个链接？

它还修复了html格式，将uls 放在lis 中，而不是它们是兄弟姐妹。即 <li><ul><li></li></ul></li>代替<li></li><ul><li></li></ul>.

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

于 2013-11-07T00:03:14.437 回答
1

使用slideToggle();代替slideDown();，这将使它根据当前方向执行 slideDown 或 slideUp。

于 2013-11-06T23:04:18.053 回答