jQuery 하나의 요소가 작동하지 않는 것을 모두 선택합니다.

Question

특정 div를 클릭하면 메뉴가 표시되는 함수를 만들어야합니다. 그런 다음 특정 div를 제외하고 사용자가 웹 사이트의 아무 곳이나 클릭하면 숨길 필요가 있습니다. 예를

<div class="showMeHideMe" style="display:none;">Example</div> 
<div class="showIt">Show it!</div> 

그리고 내 자바 스크립트를

jQuery('.showIt').click(function(){ 
$('.showMeHideMe').show(); 
}); 

jQuery(document).not('.showMeHideMe').click(function(){ 
$('.showMeHideMe').hide(); 
}); 

내가 everyting가 제대로 작동하고 .showMeHideMe가 표시되고, .showIt 클릭하면

. 그런 다음 페이지의 아무 곳이나 클릭하면 .showMeHideMe이 (가) 숨어 있습니다. 또한 OK. 그러나 그것이 보여지고 내가 .showMeHideMe를 클릭하면, 그것은 스스로 숨 깁니다. 어떤 잘못입니다.

내가 뭘 잘못하고 있는지 말해 줄 수 있습니까?

UPDATE는 매우 빠른 답변 주셔서 감사합니다.

수정해야 할 페이지에 정확하게 표시하는 것이 좋습니다. 이제 내 코드는 다음과 같습니다과 함께이 또한

jQuery(".search--box").hide(); 
jQuery(".desktop-search").mouseenter(function (e) { 
e.stopPropagation(); 
jQuery(".search--box").show(); 
jQuery(".search--box--input").focus(); 
}); 
jQuery(document).not('input.search--box--input').click(function (e) { 
e.stopPropagation(); 
jQuery(".search--box").hide(); 
}); 

변형을 처리해야

<div class="search--box"> 
<div class="search--box-inner"> 
<form role="search" method="get" id ="searchform" action=""> 
<input class="search--box--input" name="s"> 
</input> 
</form> 
</div> 
</div> 

그리고 자바 스크립트 : 대신이 아니요의() 작동하지 않습니다 없음. 여전히 입력을 클릭하면 여전히 숨어 있습니다.

Answer 1

마지막으로 우리는 조건으로 클릭 한 요소가 특정 클래스를 가지고 있는지 확인합니다.

$(document).not('input.search--box--input').click(function (e) { 
       e.stopPropagation(); 
       if ($(e.target).hasClass('search--box--input')) { 
        return; 
       } 
       $(".search--box").hide(); 
      }); 

아마 표시/숨기기가 잘되어 가고 ... 나와 같은 문제가있는 사람 :

Answer 2

stopPropagation은 showIt의 클릭 내에서 사용할 수 있으며 다른 기능은 document의 클릭 만 처리합니다. 당신이 어떤 문서에 클릭이있을 때 - -

jQuery('.showIt').click(function(e){ 
 
    e.stopPropagation(); 
 
    $('.showMeHideMe').show(); 
 
}); 
 

 
jQuery(document).click(function(){ 
 
    $('.showMeHideMe').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="showMeHideMe" style="display:none;">Example</div> 
 
<div class="showIt">Show it!</div>

이 방법은 여기 .showMeHideMe가 숨겨집니다, 이하지 않는 클릭이 .showIt 요소이고,을 stopPropagation()에 대한 호출 할 것 다른 hide 함수는 호출되지 않습니다.

Answer 3

대신이 라인의

:

jQuery(document).not('.showMeHideMe').click(function(){ 

당신은 위임 할 수있다 : 당신이 DOM에 각각의 현재와 미래의 요소를 일치 이런 식으로

jQuery(document).on('click', ':not(.showIt)', function(e) { 

가 아니라 'showIt'요소입니다.

'showIt'소자 이벤트 시퀀스 (bubling) 외부의 사용자 클릭은

:

• 소자
• ....
• HTML
• 창 그래서

, 이러한 이벤트의 전파를 중지하고 메뉴를 닫으려면 첫 번째 하나를 사용할 수 있습니다. 메뉴 제목을 클릭 할 때도 마찬가지입니다.

코드 조각 :

jQuery('.showIt').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    $('.showMeHideMe').show(); 
 
    console.log('.showIt clicked'); 
 
}); 
 

 
jQuery(document).on('click', ':not(.showIt)', function(e) { 
 
    e.stopPropagation(); 
 
    $('.showMeHideMe').hide(); 
 
    console.log(this.tagName + ' clicked'); 
 
});

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

 

 
<div class="showMeHideMe" style="display:none;">Example</div> 
 
<div class="showIt">Show it!</div>

이 가

Answer 4

내가 실제 사이트를 보지 않고 말할 기운

은, 그러나 ... 내가 무슨 일이 일어나고 있는지 생각은 .hide()가 있기 때문에 작업을 수행하지만 것입니다 당신의 다른 기능은 마우스 입력에서 작동하고 그 영역을 떠나지 않았습니다. 단지 .show()를 다시 트리거합니다.

이것이 문제인 경우 클래스를 추가하는 것이 좋습니다. 그래서 addClass(); 및 removeClass(); 그리고 귀하의 CSS 디스플레이에 : 아무도 해당 클래스