Presented below is a nested list structure:
<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>
The jQuery script below hides all nested ul elements until they are hovered over:
$("ul li ul").hide();
$("ul li").hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').slideUp('fast');
}
);
I am seeking a solution to keep the structure open from any li element with class="current" while still allowing hover effects on other ul elements. The parent ul of class="current" should remain visible at all times. Any thoughts would be appreciated!
Thank you for your help!