Jquery slideDown child ul [英] Jquery slideDown child ul

问题描述

我怎样才能只滑下正在盘旋的元素的孩子ul？

How can I slide down ONLY the child ul of the element that is being hovered over?

<ul>
        <li class="main">
            <a href="real_estate.htm">Real Estate </a>
            <ul class="sub">
                <li> <a href="#">Consulting Services</a></li>
                <li> <a href="#">Investment</a></li>
                <li> <a href="#">Property Management</a></li>
                <li> <a href="#">Development</a></li>
            </ul>
        </li>
        <li class="main">
            <a href="investment.htm">Investment</a>
            <ul class="sub">
                <li><a href="#">Philosophy</a></li>
              <li><a href="#">Criteria</a></li>
          </ul>
        </li>
</ul>

Jquery 

    $(document).ready(function() {
    $(".sub").hide();
    $(".main").hover(function() {
        $(".sub").slideDown('slow');
    });
});

推荐答案

添加上下文：

$(".sub", this).slideDown('slow');

选择器的第二个参数是上下文。通过传递此，我们告诉选择器仅匹配 .sub 元素在此中找到，其中此代表 .main 您目前正在徘徊。

The second parameter of the selector is a context. By passing this, we're telling the selector to only match the .sub elements that are found within this, where this, represents the .main that you are currently hovering.

相当于：

$(this).find('.sub').slideDown('slow');

http://api.jquery.com/jQuery/#selector-context

这篇关于Jquery slideDown child ul的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！