Jquery slideDown child ul

Question

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

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

Answer 1

$(".main").hover(function() {
    $(".sub", this).slideDown('slow');
});

Answer 2

添加上下文：

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

选择器的第二个参数是上下文。通过this，我们告诉选择器仅匹配.sub中this元素，其中this表示.main您当前正在徘徊。

等价物是：

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

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

Answer 3

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

this指的是悬停的.main和.find会找到其中的所有.sub元素。

Answer 4

我想我理解你的问题。在这种情况下，您可以使用更多选择器或首先查找jQuery的最后一个函数。

CSS：

.sub { display: none; /* probably you will need height: 0; and/or position relative; left: Xpx; top: Ypx; to make the sub-menus at good position for showing.. */ }

JavaScript的：

function hideMenu(obj)
{
    // This is valid. Depending on situation you will see below another sample.
    $(obj).find("ul").slideUp();
    // or
    // $(obj + " ul").slideUp();
}

function showMenu(obj)
{
    // This is valid. Depending on situation you will see below another sample.
    $(obj).find("ul").slideDown();
    // or
    // $(obj + " ul").slideDown();
}

我想你正在生成整个页面......在这种情况下，你必须以相同的方式生成li元素，但是添加onmouseover =“showMenu（this）”onm​​ouseout =“hideMenu（this）”：

<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">...</li>

您必须在html中包含JavaScript文件 - 在head标记中包含：

<script type="text/javascript" src="path to the file"></script>

这是一个示意图。