[JQUERY] JQuery와에 닫 외부 메뉴를 클릭

JQuery와에 닫 외부 메뉴를 클릭

해결법

1. ---

   1.이 질문은 사용하는 방법을 살펴보십시오 :

   이 질문은 사용하는 방법을 살펴보십시오 :

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

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

2. ---

   2.대답은 권리이지만, 클릭이 페이지에 발생할 때마다 트리거 될 청취자를 추가합니다. 이를 방지하려면 한 시간 동안 청취자를 추가 할 수 있습니다 :

   대답은 권리이지만, 클릭이 페이지에 발생할 때마다 트리거 될 청취자를 추가합니다. 이를 방지하려면 한 시간 동안 청취자를 추가 할 수 있습니다 :

   $('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');
       }
   });
   

3. ---

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

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

   여기 user2989143의 답변에 따라 간단한 솔루션입니다 :

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

4. ---

   4.플러그인을 사용하여 당신이 경우에 확인의 경우, 나는 여기에 플러그인 벤 독일어의 clickoutside을 제안한다 :

   플러그인을 사용하여 당신이 경우에 확인의 경우, 나는 여기에 플러그인 벤 독일어의 clickoutside을 제안한다 :

   그 사용법이 간단과 같다 :

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

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

5. ---

   5.당신이 조사 할 수 2 옵션 :

   당신이 조사 할 수 2 옵션 :

6. ---

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

   나는 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
           }
       });
   });
   

7. ---

   7.나는 같은 페이지에서 같은 동작을 여러 요소와이 솔루션을 사용 :

   나는 같은 페이지에서 같은 동작을 여러 요소와이 솔루션을 사용 :

   $("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 ()는 나쁜 생각, 버튼 및 링크를 포함하여 많은 일들이 휴식 표준 동작입니다.

8. ---

   8.나는 최근에 같은 문제에 직면했다. 나는 다음과 같은 코드를 작성 :

   나는 최근에 같은 문제에 직면했다. 나는 다음과 같은 코드를 작성 :

       $('html').click(function(e) {
         var a = e.target;
         if ($(a).parents('.menu_container').length === 0) {
           $('.ofSubLevelLinks').removeClass('active'); //hide menu item
           $('.menu_container li > img').hide(); //hide dropdown image, if any
        }
       });
   

   그것은 완벽하게 나를 위해 일했다.

9. ---

   9.무엇에 대해?

   무엇에 대해?

       $(this).mouseleave(function(){  
           var thisUI = $(this);
           $('html').click(function(){
                   thisUI.hide();
               $('html').unbind('click');
            });
        });
   

10. ---

    10.내가 사용 mousedown 이벤트 대신에 클릭 이벤트가 더 유용하게 찾을 수 있습니다. 클릭 이벤트는 클릭 이벤트와 페이지의 다른 요소에있는 경우 사용자가 클릭을 작동하지 않습니다. jQuery의 하나 () 메소드와 조합은 다음과 같습니다 :

    내가 사용 mousedown 이벤트 대신에 클릭 이벤트가 더 유용하게 찾을 수 있습니다. 클릭 이벤트는 클릭 이벤트와 페이지의 다른 요소에있는 경우 사용자가 클릭을 작동하지 않습니다. jQuery의 하나 () 메소드와 조합은 다음과 같습니다 :

    $("ul.opMenu li").click(function(event){
    
       //event.stopPropagation(); not required any more
       $('#MainOptSubMenu').show();
    
       // add one mousedown event to html
       $('html').one('mousedown', function(){
           $('#MainOptSubMenu').hide();
       });
    });
    
    // mousedown must not be triggered inside menu
    $("ul.opMenu li").bind('mousedown', function(evt){
        evt.stopPropagation();
    });
    

11. ---

    11.심지어 내가 같은 상황을 가로 질러 와서 내 멘토 중 하나는 자신을 통해이 아이디어를 넣어.

    심지어 내가 같은 상황을 가로 질러 와서 내 멘토 중 하나는 자신을 통해이 아이디어를 넣어.

    단계 : 1을 우리가 드롭 다운 메뉴를 표시해야하는 버튼을 클릭 할 때. 아래 그림과 같이 다음 클래스 이름 아래의 "more_wrap_background"현재 활성 페이지에 추가

    $('.ui-page-active').append("<div class='more_wrap_background' id='more-wrap-bg'> </div>");
    

    스텝 2는 div 태그 등의 클릭을 추가

    $(document).on('click', '#more-wrap-bg', hideDropDown);
    

    hideDropDown이 기능을 여기서 다운 메뉴 숨기기 드롭으로 호출 할 수

    스텝 3 드롭 다운 메뉴를 숨기고 중요한 단계는 클래스가 이전처럼 추가하면 있다는 것을 제거입니다

    $('#more-wrap-bg').remove();
    

    나는 위의 코드에서 해당 ID를 사용하여 제거하고

    .more_wrap_background {
      top: 0;
      padding: 0;
      margin: 0;
      background: rgba(0, 0, 0, 0.1);
      position: fixed;
      display: block;
      width: 100% !important;
      z-index: 999;//should be one less than the drop down menu's z-index
      height: 100% !important;
    }
    

12. ---

    12.

    $("html").click( onOutsideClick );
    onOutsideClick = function( e )
    {
        var t = $( e.target );
        if ( !(
            t.is("#mymenu" ) ||     //Where #mymenu - is a div container of your menu
            t.parents( "#mymenu" ).length > 0
            )   )
        {
            //TODO: hide your menu
        }
    };
    

    그리고 더 나은 메뉴가 표시되는 경우에만 리스너를 설정하고 항상 메뉴가 숨겨져 된 후 리스너를 제거합니다.

13. ---

    13.그것은 복잡 할 필요가 없습니다.

    그것은 복잡 할 필요가 없습니다.

    $(document).on('click', function() {
        $("#menu:not(:hover)").hide();
    });
    

14. ---

    14.난 당신이 뭔가를해야한다고 생각 : http://jsfiddle.net/BeenYoung/BXaqW/3/

    난 당신이 뭔가를해야한다고 생각 : http://jsfiddle.net/BeenYoung/BXaqW/3/

    $(document).ready(function() {
      $("ul.opMenu li").each(function(){
          $(this).click(function(){
                if($(this).hasClass('opened')==false){          
                    $('.opMenu').find('.opened').removeClass('opened').find('ul').slideUp();
                    $(this).addClass('opened'); 
                    $(this).find("ul").slideDown();
                }else{
                    $(this).removeClass('opened'); 
                    $(this).find("ul").slideUp();               
                }
          });
      });    
    });
    

    나는 당신을 위해 유용 희망!

15. ---

    15.'눈에 보이는'선택기를 사용합니다. .menuitem은을 숨기기 요소 (들)입니다 ...

    '눈에 보이는'선택기를 사용합니다. .menuitem은을 숨기기 요소 (들)입니다 ...

    $('body').click(function(){
      $('.menuitem:visible').hide('fast');
    });
    

    또는 당신은 이미 VAR의 .menuitem 요소 (들)이있는 경우 ...

    var menitems = $('.menuitem');
    $('body').click(function(){
      menuitems.filter(':visible').hide('fast');
    });
    

from https://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery by cc-by-sa and MIT license