[jquery] jquery에서 닫으려면 메뉴 외부를 클릭하십시오.

따라서 비즈니스 요구 사항에 따라 클릭시 표시되는 드롭 다운 메뉴가 있습니다. 메뉴에서 마우스를 떼면 메뉴가 다시 숨겨집니다.

그러나 이제 사용자가 문서의 아무 곳이나 클릭 할 때까지 제자리에 있어야합니다. 이것이 어떻게 성취 될 수 있습니까?

이것은 내가 지금 가지고있는 것의 단순화 된 버전입니다.

$(document).ready(function() {
  $("ul.opMenu li").click(function(){
   $('#MainOptSubMenu',this).css('visibility', 'visible');
  });

  $("ul.opMenu li").mouseleave(function(){
      $('#MainOptSubMenu',this).css('visibility', 'hidden');
  });
});



<ul  class="opMenu">
  <li id="footwo" class="">
    <span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>
      <ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">
        <li>some</li>
       <li>nav</li>
       <li>links</li>
       </ul>
    </li>
</ul>

나는 $('document[id!=MainOptSubMenu]').click(function()메뉴가 아닌 모든 것을 트리거 할 것이라고 생각하는 것과 같은 것을 시도했지만 작동하지 않았습니다.

답변

이 질문에서 사용한 접근 방식을 살펴보십시오.

요소 외부의 클릭을 어떻게 감지합니까?

창을 닫는 문서 본문에 클릭 이벤트를 첨부하십시오. 문서 본문으로의 전파를 중지하는 별도의 클릭 이벤트를 창에 첨부하십시오.

$('html').click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

답변

정답은 맞지만 페이지에서 클릭이 발생할 때마다 트리거되는 리스너를 추가합니다. 이를 방지하기 위해 리스너를 한 번만 추가 할 수 있습니다.

$('a#menu-link').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();

    $('#menu').toggleClass('open');

    $(document).one('click', function closeMenu (e){
        if($('#menu').has(e.target).length === 0){
            $('#menu').removeClass('open');
        } else {
            $(document).one('click', closeMenu);
        }
    });
});

편집 : stopPropagation()초기 버튼 을 피 하려면 이것을 사용할 수 있습니다.

var $menu = $('#menu');

$('a#menu-link').on('click', function(e) {
    e.preventDefault();

    if (!$menu.hasClass('active')) {
        $menu.addClass('active');

        $(document).one('click', function closeTooltip(e) {
            if ($menu.has(e.target).length === 0 && $('a#menu-link').has(e.target).length === 0) {
                $menu.removeClass('active');
            } else if ($menu.hasClass('active')) {
                $(document).one('click', closeTooltip);
            }
        });
    } else {
        $menu.removeClass('active');
    }
});

답변

stopPropagation그들이 HTML 요소에 가까운 핸들러를 첨부 할 수있는 다른 메뉴를 포함하여 다른 이벤트 핸들러를 방해 할 수 있기 때문에 옵션은 엉망이다.

다음은 user2989143 의 답변을 기반으로 한 간단한 솔루션입니다 .

$('html').click(function(event) {
    if ($(event.target).closest('#menu-container, #menu-activator').length === 0) {
        $('#menu-container').hide();
    }
});

답변

플러그인 사용이 괜찮다면 여기에있는 Ben Alman의 clickoutside 플러그인을 제안 합니다 .

사용법은 다음과 같이 간단합니다.

$('#menu').bind('clickoutside', function (event) {
    $(this).hide();
});

도움이 되었기를 바랍니다.

답변

조사 할 수있는 두 가지 옵션 :

메뉴를 표시 할 때 페이지의 나머지 부분을 덮는 큰 빈 DIV를 그 뒤에 놓고 클릭시 이벤트를 제공하여 메뉴 (및 자체)를 닫습니다. 이것은 배경을 클릭하면 라이트 박스가 닫히는 라이트 박스에 사용되는 방법과 유사합니다.
메뉴를 표시 할 때 메뉴를 닫는 본문에 일회성 클릭 이벤트 핸들러를 첨부하십시오. 이를 위해 jQuery의 ‘.one ()’을 사용합니다.

답변

나는의 변종 발견 Grsmto의 솔루션 과 데니스 ‘솔루션은 내 문제를 해결.

$(".MainNavContainer").click(function (event) {
    //event.preventDefault();  // Might cause problems depending on implementation
    event.stopPropagation();

    $(document).one('click', function (e) {
        if(!$(e.target).is('.MainNavContainer')) {
            // code to hide menus
        }
    });
});

답변

이 솔루션을 동일한 페이지에서 동일한 동작을 가진 여러 요소와 함께 사용합니다.

$("html").click(function(event){
    var otarget = $(event.target);
    if (!otarget.parents('#id_of element').length && otarget.attr('id')!="id_of element" && !otarget.parents('#id_of_activator').length) {
        $('#id_of element').hide();
    }
});

stopPropagation ()은 나쁜 생각입니다. 이것은 버튼과 링크를 포함한 많은 것들의 표준 동작을 깨뜨립니다.