jQuery切换嵌套列表行为

Question

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

IT工作正常，但行为有点不对。如果嵌套列表可见并且父头被单击，我希望隐藏嵌套列表。目前它这样做，但之后直接显示嵌套列表。

请参见本的jsfiddle的工作代码：

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

Answer 1

可以触发档节目，如果同级<ul>当前是隐藏的（这实际上使得一个切换），像这样：

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

You can test it out here。总之，你可以苗条下来，并得到相同的效果，虽然，这样的：

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

You can try that version out here。

Answer 2

看看这里： 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(); 
    });