是否有一個簡單的解決方案「排除/隱藏」功能的div？

Question

我儘量讓與jQuery一的onClick菜單，用下面的問題來了：

有含<div>內4個<li>元素，我想表明該div當我點擊選擇<li>。 div出現了，當我點擊其他li，以前顯示div隱藏和更正一個，形式單擊李，顯示出來。這工作正常，但是當我點擊那個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組圖）

有一個簡單的解決方案以某種方式「排除/隱藏」功能的div？

Answer 1

這應該工作（它從<div>攔截點擊並阻止其向上冒泡和觸發點擊<li>）

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

Answer 2

這是因爲DIV是「禮」元素中......

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

你在這裏ASING，執行任何操作，如果你不是在div層，點擊後前