控制 slideUp 和 SlideDown

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

Controlling slideUp and SlideDown

jquery

slide