jQueryは1つの要素を除いてすべてを選択します

Question

ユーザーが特定のdivをクリックすると、メニューを表示する関数を作成する必要があります。ユーザーが特定のdivを除いてウェブサイトのどこかをクリックすると、それを隠す必要があります。例

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

そして、私はJavaScript

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

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

については

私は.showIt、everyting細かい作業と.showMeHideMeが表示されている上でクリックした場合。それから私がページのどこかをクリックすると、.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> 

とJavaScript：、代わりに.NOTの（）に動作していないではないが。まだ入力をクリックすると、まだ隠れています。

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(){ 

：このように

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

を使用すると、DOMではなく、「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（）が作業を行うということだと思いますが、以来、あなたの他の機能はマウス入力で動作し、あなたは決してその領域を離れません。

これが問題の場合は、代わりにクラスを追加することをお勧めします。だからaddClass（）;およびremoveClass（）;あなたのCSSディスプレイで：なしそのクラス