开发者

jQuery apply functionality only to class and parent elements

开发者 https://www.devze.com 2022-12-30 23:37 出处:网络
I have the following list: <ul> <li class=\"topCurrent\">One <ul> <li>One-1 <ul>

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消