jQuery .hide() не работает для $ (document) .click

Question

Я пытаюсь создать раскрывающееся меню с помощью jQuery.

HTML является:

<div id="cats"> 
    <div id="cat_ram"> 
     <span>RAM</span> 
     <div class="cat_arrow"></div> 
     <div class="cat_options"> 
      <ul class="cat_list"> 
       <li>1GB</li> 
       <li>2GB</li> 
       <li>3GB</li> 
       <li>4GB</li> 
      </ul> 
     </div> 
    </div> 
</div> 

мой JQuery код:

$(document).ready(function(e) { 

    $('.cat_options').hide(); 

    $('.cat_arrow').click(function(){ 
      $('.cat_options').toggle(); 
     }); 


     $(document).click(function(){ 
     if($('.cat_options').is(':visible')){ 
      $('.cat_options').hide(); 
      } 
     }) 
}); 

Вот что я пытаюсь сделать:

1) когда .cat_arrow щелкают выпадающее меню, то есть .cat_options должно быть s hown. И когда он снова щелкнут, он должен скрыться.

2) В то время как .cat_options видна, если событие происходит щелчок где-либо еще на странице (не на .cat_arrow) .cat_options должен скрывать.

Теперь проблема заключается в том, что:

1) Для приведенного выше кода в .cat_options никогда не показывает. А если добавить еще один, если условие как этот

if($('.cat_options').is(':hidden')){ 
     $('.cat_options').show(); 

затем щелкнув в любом месте документа будет сделать .cat_options видны на т.е. .cat_arrow станет бесполезным.

Answer 1

Остановить распространение на .cat_arrow клик:

$('.cat_arrow').click(function(e){ 
    e.stopPropagation(); 
    $('.cat_options').toggle(); 
});