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>
开发者_如何学JAVA </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 of the ul below the top level ul until there is a hover over it.
What I would like to do is this:
If an li has a class="current"
I would like that structure to be open up until the point that current is hit. It would still allow the ul below it to be displayed on a hover, as well as any other ul's, but at no point would the parents of class="current"
be hidden.
Suggestions? This problem has been driving me crazy.
Thanks!
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 keep the hover functionality from applying to any LI that has an li.current
as a child.
Here is a demo (using hover instead of hoverIntent for ease of demoing).
Just change your hoverIntent call to the following:
$("ul li").hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').not($('.current').parents()).slideUp('fast');
}
);
P.S. Should mention that my answer refs Nick Craver's answer when you asked this question before. P.P.S. Wish my debug time had been reduced by your referencing that post and not changing the class name.
精彩评论