Expand/collapse、アイコンアイコンの更新

Question

divをクリックして隠し領域を拡大し、別のクリックで折りたたむという単純な関数を記述しようとしています。その部分は機能する。しかし、さらに、私は矢印インジケータの変更を展開時には上に、折りたたんでは下へと変更したいことを示したいと思います。その部分は、最初のクリックでのみ機能しているように見えますが、展開すると領域が崩壊しても元に戻りません。私は何が欠けていますか？

は、ここで私は、クラスのテストを視界に

$(".myDiv").click(function() { 
     var $expandable = $(this).parent().find(".expandable"); 
     $expandable.slideToggle("fast"); 
     if ($expandable.is(":visible")) { 
      $(this).find("span").removeClass("Down").addClass("Up"); 
     } else { 
      $(this).find("span").removeClass("Up").addClass("Down"); 
     } 
}); 

Answer 1

よりもむしろテストを書いた何ですか？

$(".myDiv").click(function() { 
     var $expandable = $(this).parent().find(".expandable"); 
     $expandable.slideToggle("fast"); 
     var $span = $(this).find("span"); 
     if ($span.hasClass("Down")){ 
      $span.removeClass("Down").addClass("Up"); 
     } else { 
      $span.removeClass("Up").addClass("Down"); 
     } 
}); 

Answer 2

slideToggleの位置を変更し、表示可能かどうかをテストします。それはあなたがそれを持っているように常に見えます。閉じたときにスライドを起動すると、すぐに表示されます。

Answer 3

比較のためにクラスを使用することは常に良い選択です。しかし、矢印を表示するために可視性を使用する場合は、トグルメソッドが遅延を追加するので、展開可能な要素を切り替える前に可視性をチェックする必要がありますので、ブラウザが比較線を実行したときに要素の可視性が既に変更されています。

$(".myDiv").click(function() { 
    var $expandable = $(this).parent().find(".expandable"); 

if ($expandable.css("display") == "none") { 
     $(this).find("span").removeClass("Up").addClass("Down"); 
    } else { 
     $(this).find("span").removeClass("Down").addClass("Up"); 
    }   
    $expandable.slideToggle("fast"); 
    }); 

これは私のためのトリックをしたようだった。