Question

我正在用JQuery创建一个手风琴菜单到目前为止，我可以做到这一点，但一次只打开一个子列表，我需要尽可能多地离开。

我需要slideUp()只有我点击的确切菜单而不是全部...

这是我的Codepen，您可以在其中看到代码正常运行。

正如您所看到的，当您打开一个子菜单时，您将关闭所有其他子菜单。我知道这是因为这行代码：

$(".prof-list ul").slideUp();

当我点击H3或该特定li标记时，我无法找到一种方法来做我想做的事情。我怎样才能只关闭那一个并将所有其余部分保持原样（关闭/打开）。

Answer 1

尝试将slideToggle()用于当前元素

$(document).ready(function(){
    $(".prof-list h3").click(function(){
        //Slide up all the elements of the list
        //$(".prof-list ul").slideUp();// comment this
        //Slide down the elements below the H3 clicked - only if closed
        //if(!$(this).next().is(":visible")) // comment this
        {
            $(this).next().slideToggle();// use slideToggle here
        }
    });
});

Demo

简化代码，

$(document).ready(function(){
    $(".prof-list h3").click(function(){
        //Toggle only current container's content
        $(this).next().slideToggle();
    });
});

Answer 2

只需在click event中保留一行，如下所示，然后移除剩下的一行。

$(".prof-list h3").click(function(){
        $(this).next().slideToggle();
})

<强> Pen here

Answer 3

以下是可以重复使用的工作示例代码。在这里，我为父UL元素添加了 ID作为列表

var pre;
    $(document).ready(function() {

        $("#list").find("ul").hide();

         pre = $("#list").find("ul:first");
        pre.show();

        $("#list").find("h3").each(eachItem);

    });

    eachItem = function(key, val) {

        console.log(val);

        $(val).click(function(e) {



            $(e.target).parent().find("ul").slideDown();
            pre.hide();
            pre = $(e.target).parent().find("ul");

        });

    }

控制slideUp和SlideDown

3 个答案: