Szymon Szymon - 6 months ago 7
HTML Question

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?

Answer

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