메뉴 바깥 쪽을 클릭 할 때 숨기는 드롭 다운

Question

간단한 드롭 다운 스크립트가 있는데 메뉴 바깥 쪽을 클릭하여 열려있는 모든 드롭 다운을 숨기고 싶습니다. 그러나 작동하지 않는 것 같습니다. 왜 그 이유를 알고 있습니까?

여기에서 찾을 수 있습니다 : http://codepen.io/dr-potato/pen/rLleC?editors=101

HTML

<ul> 
    <li><a href="#">Home</a></li> 
    <li class="Navigation-listItem is-dropdown"> 
    <a href="#">About</a> 
    <ul class="Navigation-list is-dropdown is-hidden"> 
     <li>Johnny</li> 
     <li>Julie</li> 
     <li>Jamie</li> 
    </ul> 
    </li> 
    <li class="Navigation-listItem is-dropdown"> 
    <a href="#">Contact</a> 
    <ul class="Navigation-list is-dropdown is-hidden"> 
     <li>Johnny</li> 
     <li>Julie</li> 
     <li>Jamie</li> 
    </ul> 
    </li> 
</ul> 

당신은 당신의 드롭 다운의 표시 속성을 변경할 수 있습니다

$(document).ready(function() { 
    $('.Navigation-listItem').click(function() { 
     $(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden'); 
    }); 
}); 

/* Anything that gets to the document 
    will hide the dropdown */ 
$(document).click(function(){ 
    $(".Navigation-listItem.is-dropdown").addClass('is-hidden'); 
}); 

/* Clicks within the dropdown won't make 
    it past the dropdown itself */ 
$(".Navigation-listItem.is-dropdown").click(function(e){ 
    e.stopPropagation(); 
}); 

Answer 1

Working Fiddle

jQuery를 코드

$(document).ready(function() { 
    $('.Navigation-listItem').click(function() { 
     $(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden'); 
    }); 


    /* Anything that gets to the document 
    will hide the dropdown */ 
    $(document).on('click', function (event) { 
     if ($(event.target).closest('#menu').length == false) { 
      $(".Navigation-list.is-dropdown").addClass('is-hidden'); 
     } 
    }); 

    /* Clicks within the dropdown won't make 
    it past the dropdown itself */ 
    $(".Navigation-listItem.is-dropdown ").click(function (e) { 
     e.stopPropagation(); 
    }); 
}); 

도와주세요 this answer

Answer 2

CSS

.Navigation-list { 
    display: block; 
} 

.Navigation-list.is-hidden { 
    display: none; 
} 

JS 이 방법. 이것은 단지 대략적인 코드 일뿐입니다.

     if(dropDownShow.css('display') != 'block'){ 
          dropDownShow.css('display', 'block'); 
          dropDownShow.css('position', 'absolute'); 

         } 
         else{ 
          dropDownShow.css('display', 'none'); 
         } 

Answer 3

당신이 준 정보와 나는 그것을 작동 볼 수없는 codepen으로

,하지만 난 가정이 $ (문서) .click (함수() 드롭 아래로 내부에 있기 때문에 작동하지 않습니다 숨길 수 당신이 그것을 클릭하면 문서 그래서, 내가 당신이 게시물 How to hide/show drop down list content in HTML를 참조하는 것이 좋습니다. 사라질 것입니다.