divを関数から「除外/非表示」する簡単なソリューションはありますか？

Question

私はjQueryを使ってのonClickメニューを作ってみると次のような問題を思い付いた：

は内部<div>を含む4つの<li>要素があり、そして私は<li>を選択した上でクリックすると、そのdiv要素を示したいと思います。 divが表示され、別のliをクリックすると、以前はdivが非表示になり、正しいものが表示され、クリックしたliが表示されます。そして、それはうまく動作しますが、私がそれをクリックすると、div関数は再びそれを隠し、再び表示し、解決しようとしていることを示します。私は<div>がその機能によって制御されることを望んでいません。言い換えれば、私がそれをクリックすると、私は何も起こりたくない。div

HTMLは次のようになります。

<div class="footerMenu"> 
     <ul> 
      <li>HOME<div class="onScreen"><img src="fillTxt.png"></div>></li> 
      <li>PLENER<div class="onScreen"><img src="fillTxt2.png"></div></li> 
      <li>STUDIO<div class="onScreen"><img src="fillTxt.png"></div></li> 
      <li>INNE<div class="onScreen"> <img src="fillTxt2.png"></div></li> 
     </ul> 

    </div> 

はJavaScript：

$("div.footerMenu li").click(
    function() { 
     $("div.onScreen").hide(); 
     $(this).children("div.onScreen").fadeIn('fast');  
    },function(){ 
     $("div.onScreen").hide(); 
});//click 

The site（左下のメニュー、HOME、PLENERなどBIG PHOTOS警告）

は簡単な解決策はありますどういうわけか関数からdivを "除外/非表示"するのでしょうか？

Answer 1

クリックしたときには、任意のアクションを実行する前に、asingあり、ここで

$("div.footerMenu li").click(
    function (event) { 
     if ($(event.target).is("div.onScreen")) return; 
     $("div.onScreen").hide(); 
     $(this).children("div.onScreen").fadeIn('fast');  
    },function(){ 
     if ($(event.target).is("div.onScreen")) return; 
     $("div.onScreen").hide(); 
}); 

...です

これは

$("div.footerMenu li div.onScreen").click( 
    function(e) { e.stopPropagation(); e.preventDefault(); return false; } 
); 

Answer 2

div要素は「LI」要素の内部にあるので、それはあなたがdivの層に含まれていない場合