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下面，直到悬停在它上面。

我想做的是：

如果安莉有一个class="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 (使用hover代替hoverIntent以便于演示)。

Answer 2

只需将您的hoverIntent调用更改为以下内容：

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

附注:我的答案参考了Nick Craver的答案，当you asked this question before。P.P.S.希望我的调试时间已经减少了，因为你引用了那篇文章，而不是更改类名。