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
精彩评论