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 요소에 근접 처리기를 첨부했을 수 있는 다른 메뉴를 포함한 다른 이벤트 처리기를 방해할 수 있으므로 좋지 않습니다.

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

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

당신의 경우 플러그인을 사용하는 것이 괜찮다면, 저는 벤 알만의 클릭아웃사이드 플러그인을 다음과 같이 제안합니다.

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

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

이게 도움이 되길 바랍니다.

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

• 메뉴를 표시할 때, 페이지의 나머지 부분을 덮고 있는 큰 빈 DIV를 뒤에 배치하고 메뉴(및 자체)를 닫기 위한 클릭 시 이벤트를 제공합니다.이는 배경을 클릭하면 라이트 박스가 닫히는 라이트 박스에 사용되는 방법과 유사합니다.
• 메뉴를 표시할 때 메뉴를 닫는 본문에 원클릭 이벤트 핸들러를 부착합니다.여기에는 jQuery의 '.one()'을 사용합니다.

저는 Grsmto의 솔루션의 변형을 발견했고 Dennis의 솔루션이 제 문제를 해결했습니다.

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

이것은 어떻습니까?

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

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

$("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()은 좋지 않은 생각입니다. 이것은 버튼과 링크를 포함한 많은 것들의 표준 동작을 깨뜨립니다.

저는 최근에 같은 문제에 직면했습니다.저는 다음 코드를 작성했습니다.

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

그것은 저에게 완벽하게 효과가 있었습니다.

클릭 이벤트 대신 마우스다운 이벤트를 사용하는 것이 더 유용하다고 생각합니다.클릭 이벤트가 있는 페이지의 다른 요소를 클릭하면 클릭 이벤트가 작동하지 않습니다.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();
});

심지어 저도 같은 상황을 마주쳤고 제 멘토 중 한 명이 이 아이디어를 저에게 전달했습니다.

드롭다운 메뉴를 표시해야 하는 버튼을 클릭하면 step:1이 표시됩니다.그런 다음 아래 클래스 이름 "more_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;
}

당신은 사용할 수 있습니다.:visible호버링되지 않을 때 확인할 CSS 선택기.작업예시가 : 음은작예니다입제다업.

<button id="menu-btn">
  Menu
</button>
<div id="menu-popup" style="display: none">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

$("#menu-btn").on('click', function() {
    $("#menu-popup").toggle();
});

$(document).on('click', function() {
    if (!$("#menu-btn:hover").length) {
    $("#menu-popup:not(:hover)").hide();
  }
});

JSFidle : https://jsfiddle.net/8em0Lz1d/

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

또한 메뉴가 표시될 때만 수신기를 설정하고 메뉴가 숨겨지면 항상 수신기를 제거하는 것이 좋습니다.

저는 당신이 이런 것이 필요하다고 생각합니다: 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();               
            }
      });
  });    
});

그것이 당신에게 유용하기를 바랍니다!

':visible' 선택기를 사용합니다.여기서 .menuitem은 숨길 요소입니다...

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

또는 var에 .menuitem 요소가 이미 있는 경우...

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

만약 당신이 jQuery를 사용하지 않고 순수한 CSS와 HTML로 하기를 원한다면 이것이 해결책입니다.

• 트리거 요소를 만들고 그 안에 팝업 요소를 기록합니다.
• 클릭 핸들러를 부착하여 트리거 요소의 클릭 시 팝업을 숨깁니다.
• 전체 화면 너비로 확장되는 배경 요소를 가지고 팝업을 숨기는 요소에 클릭 핸들러를 부착합니다.
• 연결된 모든 클릭 핸들러는 다른 핸들러가 호출되지 않도록 이벤트 전파를 중지해야 합니다.

아래에서 라이브 코드 찾기

function showPopup(bShow,args){
  var popupContainer = document.getElementsByClassName('popup-container')[0];
  debugger;
  if(!bShow){
    popupContainer.classList.add('hide-element')
  }else{
    popupContainer.classList.remove('hide-element')
  }
  args[0].stopPropagation();
}

.popup-trigger{
  cursor: pointer;
  margin: 10px;
  padding: 5px;
  width: fit-content;
  background: red;
  border-radius: 5px;
  position: relative;
}

.body{
  width: 100%;
  height: 1000px;
  background: yellow;
  padding: 10px;
}

.backdrop{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.actual-popup{
}
.popup-container{
 top: 30px;
 width: 100px;
 height: 50px;
 background: grey;
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
}

.hide-element{
  visibility: hidden;
}

<div class="body">

  <div onclick="showPopup(true,arguments)" class="popup-trigger">Click to open dialog with button
    <div onclick="showPopup(false,arguments)" class='popup-container hide-element'> 
     <div onclick="showPopup(false,arguments)" class='backdrop'>  </div>
     <div onclick="showPopup(true,arguments)" class='actual-popup'> 
        <button onclick="showPopup(false,arguments)"> close me </button>
     </div>
     
    </div>
   
  </div>
</div>

이 대답들을 훑어보고 제가 결국 이렇게 하게 된 것입니다.

$('html').click(function(event) {

let openMenuButton = $("#menu-open");
let menu = $("#menu-popup");
let both = $('#menu-popup, #menu-open');

    if ( $(event.target).closest(both).length === 0 ) {  
        $(menu).hide();
        console.log("if statement");
        
    } else if ( $(menu).is(":visible") && $(event.target).closest(openMenuButton).length === 1 ){
    $(menu).hide();
    console.log("if ELSE statement");
    } else {
    $(menu).show();
    console.log("ELSE statement");
    }
   
});

언급URL : https://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery