jQuery 仅将功能应用于类和父元素

Question

我有以下列表:

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

使用以下 jQuery:

$("ul li ul").hide();

$("ul li").hoverIntent(
    function(){
        $(this).children('ul').slideDown('fast');
    },
    function(){
       $(this).children('ul').slideUp('fast');
    }
);

这样做是将所有 ul 隐藏在顶级 ul 之下，直到鼠标悬停在它上面。

我想做的是:

如果一个 li 有一个 class="current" 我希望那个结构一直打开直到 current 被击中。它仍然允许在悬停时显示其下方的 ul，以及任何其他 ul，但绝不会隐藏 class="current" 的父级。

建议？这个问题一直让我抓狂。

谢谢!

Answer 1

这应该是您所需要的:

$("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');
        }
    );

这将防止悬停功能应用于任何将 li.current 作为子项的 LI。

Here is a demo (使用悬停而不是 hoverIntent 以便于演示)。