div 버튼을 표시/숨기기

Question

jQuery를 사용하여 메뉴 표시/숨기기 버튼을 사용하려고합니다.

메뉴는 div에 포함되어 있으며 표시 및 숨기기 버튼을 설정하려고합니다.

<div class="menu"> 
    <div id="items"> 
     <ul> 
      <li>home</li> 
      <li>about</li> 
      <li>contact</li> 
     </ul> 
    </div> 
     <p class="dismiss-btn" id="btn-hide"><i class="fa fa-bars"></i></p> 
</div> 

JS : 여기 내 코드는

<script> 
    //DOM loaded 
    $(document).ready(function() { 
     // Hide the top info bar 
     $('#btn-hide').click(function(){ 
      $("#items").toggle("slow"); 
     }); 
    }); 
</script> 

문제는 내가 버튼을 클릭하면 ... 내가 틀렸다 어떤 생각을 그 내용을 숨 깁니다 한 다음 다시 표시입니다 ?

Answer 1

이 나를 위해 잘 작동하지만 한 가지 당신이 시도 할 수 :

$('#btn-hide').click(function(e){ 
    e.stopImmediatePropagation(); 
    $("#items").toggle("slow"); 
}); 

이 해당 요소 또는 부모 요소에서 다른 "클릭"을 중지합니다.

http://api.jquery.com/event.stopimmediatepropagation/