jquery - 单击另一个li时jQuery slideToggle li

Question

当单击另一个带有嵌套 ul 和 li 的列表元素时，我想关闭（slideToggle）一个带有嵌套 ul 和 li 的列表元素。

这是我用于切换本身的 jQuery：

$(document).ready(function () {
    $("ul > li.closed").click(function (e) {
        if (e.target === this) {
            var li = $(this).closest('li');
            li.find(' > ul').slideToggle('fast');
            $(this).toggleClass("closed open");
        }
    });
});

在我的小提琴上：我想在单击“主题 2”时关闭“主题 1”。我想在单击另一个“子主题 x”时关闭“子主题 1”。

小提琴

Answer 1

我建议您先关闭所有打开的列表，然后打开单击的列表：

删除 li.closed > ul 中的规则

li.closed > ul {

}

因为 display:none 与 slideToggle() 您单击 两次 相同时发生冲突 li

并将脚本更改为

$(document).ready(function () {    
    $("#nav li ul").css('display','none');
    $("ul > li.closed").click(function (e) {
        if (e.target === this) {
            $(this).siblings("li.open").find(" > ul").slideToggle('fast',function(){
                $(this).parents("li.open:first").toggleClass("open closed");   
            });

            $(this).toggleClass("closed open").find(" > ul").slideToggle('fast');
        }
    });
});