Question

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?

Answer 1

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; } 
);