开发者

Is there a simple solution to "exclude/hide" a div from a function?

I try to make a onClick menu with jQuery and came up with a following problem:

There are 4 <li> elements containing a <div> inside, and I want to show that div when I click on selected <li>. The div shows up, and when i click on other li, previously showed div hides and correct one, form clicked li, shows up. And that works fine, but when i click on that div the function again hides it and shows again, and 开发者_开发百科thats what I'm trying to solve. I don't want that <div> to be taken under control by the function. In other words, when I click on that div I don't want anything to happen.

The HTML looks like this:

<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 (lower left menu, HOME, PLENER etc. WARNING BIG PHOTOS)

Is there a simple solution to somehow "exclude/hide" that div from the function?


This should work (it intercepts the click from the <div> and prevents it from bubbling up and triggering the click on <li>)

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


it is because the div is inside the "li" element...

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

here you are asing, before performing any action, if you are not in the div layer, when clicked

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜