외부를 클릭하여 jquery 드롭 다운 메뉴 닫기

외부를 클릭하여 jquery 드롭 다운 메뉴 닫기

---

jquery로 간단한 드롭 다운 메뉴를 개발 중입니다. 사용자가 트리거 영역을 누르면 드롭 다운 영역이 전환됩니다. 내 질문은 드롭 다운 메뉴 외부에 클릭 이벤트를 두어 드롭 다운 메뉴를 닫는 방법입니다.

---

드롭 다운을 숨기기 위해 DOM 위로 버블 링되는 모든 클릭과 버블 링을 중지하기 위해 드롭 다운의 상위로 이동하는 모든 클릭을 알릴 수 있습니다.

/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $("#dropdown").hide();
});

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

데모 : http://jsbin.com/umubad/2/edit

---

드롭 다운 메뉴를 닫을 수 있도록 드롭 다운 메뉴 외부에 클릭 이벤트를 갖는 방법은 무엇입니까? 여기에 코드

$(document).click(function (e) {
    e.stopPropagation();
    var container = $(".dropDown");

    //check if the clicked area is dropDown or not
    if (container.has(e.target).length === 0) {
        $('.subMenu').hide();
    }
})

---

클릭 이벤트를 일부 요소에 첨부해야합니다. 페이지에 다른 요소가 많이있는 경우 모든 요소에 클릭 이벤트를 첨부하고 싶지 않을 것입니다.

한 가지 가능한 방법은 드롭 다운 메뉴 아래에 페이지의 다른 모든 요소 위에 투명한 div를 만드는 것입니다. 드롭 다운이 표시 될 때 표시합니다. 요소에 드롭 다운과 투명한 div를 숨기는 클릭 처리기가 있습니다.

$('#clickCatcher').click(function () { 
  $('#dropContainer').hide();
  $(this).hide();
});

#dropContainer { z-index: 101; ... }
#clickCatcher { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropDown"></div>
<div id="clickCatcher"></div>

---

일부 특정 요소에서 이벤트 전파를 중지하면 다른 일부 스크립트가 실행되지 않을 수 있으므로 위험해질 수 있습니다. 따라서 트리거가 함수 내부에서 제외 된 영역에서 발생하는지 확인하십시오.

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

문서를 클릭하면 여기 기능이 시작되지만 #menucontainer의 트리거는 제외됩니다. 자세한 내용은 https://css-tricks.com/dangers-stopping-event-propagation/

---

선택한 답변은 하나의 드롭 다운 메뉴에서만 작동합니다. 여러 솔루션의 경우 다음과 같습니다.

$('body').click(function(event){
   $dropdowns.not($dropdowns.has(event.target)).hide();
});

---

https://jsfiddle.net/vgjddv6u/ 작동하는 또 다른 다중 드롭 다운 예제

$('.moderate .button').on('click', (event) => {
  $(event.target).siblings('.dropdown')
    .toggleClass('is-open');
});

$(document).click(function(e) {
  $('.moderate')
    .not($('.moderate').has($(e.target)))
    .children('.dropdown')
    .removeClass('is-open');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" />

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<style>
.dropdown {
  box-shadow: 0 0 2px #777;
  display: none;
  left: 0;
  position: absolute;
  padding: 2px;
  z-index: 10;
}

.dropdown a {
  font-size: 12px;
  padding: 4px;
}

.dropdown.is-open {
  display: block;
}
</style>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a>   </li>
    </ul>
  </div>
</div>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a></li>
    </ul>
  </div>
</div>

ReferenceURL : https://stackoverflow.com/questions/6463486/jquery-drop-down-menu-closing-by-clicking-outside