jQuery basculer comportement liste imbriquée

Question

J'ai un certain nombre de listes imbriquées et certains jQuery qui les cache lorsque l'on clique sur un en-tête parent.

Cela fonctionne bien, mais le comportement est légèrement faux. Si une liste imbriquée est visible et que l'en-tête parent est cliqué, j'aimerais que cette liste imbriquée soit cachée. En ce moment, il le fait, mais montre ensuite la liste imbriquée directement après.

S'il vous plaît voir ce jsFiddle pour le code de travail:

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

Answer 1

Vous pouvez déclencher l'émission si le frère <ul> est caché actuellement (rendant effectivement une bascule), comme ceci:

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

You can test it out here. Dans l'ensemble, vous pouvez perdre du poids vers le bas et obtenir le même effet, comme ceci:

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

Regardez ici: http://www.jsfiddle.net/dactivo/c3vPa/

Nous vérifions si elle est visible, et dans ce cas, nous le cacher:

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

Ce serait le code:

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