Szymon Szymon - 8 months ago 13
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

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

The HTML looks like this:

<div class="footerMenu">
<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>



$("div.footerMenu li").click(
function () {

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