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"，我希望这个结构在当前被击中之前打开。它仍然允许它下面的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以便于演示）。

Answer 2

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

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

P.S。应该提一下Nick Craver时我的回答是you asked this question before的回答。 P.P.S.希望通过引用该帖子而不更改类名来缩短调试时间。

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

2 个答案: