on clickクリックしてul - onをどこか別の場所をクリックするhide ul

Question

こんにちはすべて - 仕事中の仕事でjqueryを試みる2日目。私は、リンクの順序なしリストを持っている

は... <li class="headlink">をクリック上のリンク

の順不同のリスト内で、私は<li class="headlink">の子<ul>が見えるようになりたいと思います。

クリックすると（文書のどこにでも）、子供<ul>が消えてしまいます。

デフォルトでは、子の<ul>はスタイルシートで非表示に設定されています。

HTML

<ul id="cssdropdown"> 
    <li><a href="#">A</a></li> 
    <li class="headlink"> 
     <a href="#">B</a> 
     <ul> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">C</a></li> 
</ul> 

jqueryの

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $('#cssdropdown li.headlink').click(
      function() { $('ul', this).toggle("slow"); }); 
    }); 


    $(document).ready(function(){ 
     $('body').click(function() { 
      $('li ul:visible').hide("slow") }) }); 

</script> 

問題 - して、自分自身を隠す - 私は<li class="headlink">をクリックしたとき、私は子供ULが表示されているヨーヨー効果を得ます。

何かアドバイスをいただければ幸いです。

Answer 1

あなたは後ろ身頃に伝播するイベントを防ぐ必要があります。

$(document).ready(function(){ 
    $('#cssdropdown li.headlink').click(function(event) { 
     $('ul', this).toggle("slow"); 
     event.stopPropagation(); 
    }); 
}); 

をし、現在開いている項目を非表示にする：

$(document).ready(function(){ 
    $('#cssdropdown li.headlink').click(function(event) { 
     $(this).siblings(".headlink").hide("slow"); 
     $('ul', this).toggle("slow"); 
     event.stopPropagation(); 
    }); 
}); 

Answer 2

これは、「ヨーヨー」効果のために問題を修正します：（伝播をキャンセルする）

$(document).ready(function(){ 
    $('#cssdropdown li.headlink').click(
     function(event) { 
      $('ul', this).toggle("slow"); 
      event.stopPropagation() 
     }); 
});