JQuery applies functionality only to class and parent elements
I have the following list:
<ul>
<li class="topCurrent">One
<ul>
<li>One-1
<ul>
<li>One-1.1
<ul>
<li class="current">One-1.1.1
<ul>
<li>One-1.1.1.1</li>
<li>One-1.1.1.2</li>
<li>One-1.1.1.3</li>
</ul>
</li>
<li>One-1.1.2</li>
</ul>
</li>
<li>One-1.2</li>
</ul>
</li>
<li>One-2</li>
<li>One-3</li>
</ul>
</li>
<li>Two
<ul>
<li>Two-1</li>
<li>Two-2</li>
</ul>
</li>
Using the following jQuery:
$("ul li ul").hide();
$("ul li").hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').slideUp('fast');
}
);
What this does is hide all uls below the top level of ul until it is hovered over.
What I would like to do is:
If the li has class="current"
, I would like this structure to open until the point is removed. This will still allow the ul to be displayed below it on hover, as well as in any other ul, but by no means will the parents be hidden class="current"
.
Suggestions? This problem was driving me crazy.
Thanks!
a source to share
This should be all you need:
$("ul li:not(:has(li.current))")
.find("ul").hide().end() // Hide all other ULs
.hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').slideUp('fast');
}
);
This will cause the hover functionality to be applied to any LI with li.current
as a child.
Here is a demo (using hover instead of hoverIntent for simplicity of demonstration).
a source to share
Just change your hoverIntent call to this:
$("ul li").hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').not($('.current').parents()).slideUp('fast');
}
);
PS It should be mentioned that my refs answer Nick Craver is answering when he asked this question before . PPS Wish my debugging time was reduced by linking to this post and not changing the class name.
a source to share