jQuery 切换嵌套列表行为

Question

我有许多嵌套列表和一些 jQuery，当单击父标题时显示隐藏它们。

IT 工作正常，但行为略有错误。如果嵌套列表可见并且单击父标题，我希望隐藏该嵌套列表。目前它执行此操作，但随后直接显示嵌套列表。

请参阅此 jsFiddle 了解工作代码：

http://www.jsfiddle.net/4kG2b/

Answer 1

看这里：
http://www.jsfiddle.net/dactivo/c3vPa/

我们验证它是否可见，在这种情况下我们隐藏它：

 if( $nestList.is(':visible'))

这将是代码：

 $("#expander ul").hide();
    $("#expander h4").live("click", function(e) {

        var $this = $(this);
        var $nestList = $($this).parent().find("ul");
        var $scrollPane = $(".scroll");

        // hide visible nested lists
        $("#expander ul:visible").hide("fast", function(){
            $(this).closest("li").removeClass("open").addClass("closed");
        });
        // show this list
        if( $nestList.is(':visible'))
        {
          $nestList.hide();   
        }
        else
        {
        $nestList.show("fast", function() {
            $(this).closest("li").removeClass("closed").addClass("open");
        });
        }
        // resize scrollbars
        $scrollPane.jScrollPane();

        e.preventDefault();
    });

Answer 2

如果同级

当前隐藏（有效地使其成为切换），您可以触发显示，如下所示：

    $nestList.filter(":hidden").show("fast", function() {
        $(this).closest("li").removeClass("closed").addClass("open");
    });

您可以在此处进行测试。总的来说，您可以简化它并获得相同的效果，如下所示：

$("#expander ul").hide();
$("#expander h4").live("click", function() {
    $(this).siblings("ul").toggle("fast", function(){
        $(this).closest("li").toggleClass("open closed");
    }).closest("li").siblings(".open").toggleClass("open closed")
                    .children("ul").hide("fast");

    $(".scroll").jScrollPane();
});

您可以在这里尝试该版本< /a>.