javascript - 是否有一个简单的解决方案来解决 "exclude/hide"函数中的 div？

Question

我尝试用 jQuery 制作一个 onClick 菜单，但遇到了以下问题:

有 4 个 <li>包含 <div> 的元素在里面，我想在单击选定的 <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 (左下方菜单，主页，PLENER 等。警告大照片)

是否有一个简单的解决方案以某种方式从函数中“排除/隐藏”该 div？

Answer 1

这应该有效(它拦截来自 <div> 的点击并防止它冒泡并触发对 <li> 的点击)

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