如何使用“this”关键字选择具有特定类的所有子元素？

Question

我正在创建一个导航栏，允许用户在悬停或单击链接后查看下拉菜单。每个链接都有一个名为“nav_item”的类。有超过 1 个下拉菜单；每个都有一个名为“下拉”的类。将鼠标悬停在“nav_item”上后，具有名为“dropdown”的类的子元素应设置为“display: block;”。

这是我的导航条码：

<nav>
    <div id="nav_title">
        Learn Web Design
    </div>
    <div class="nav_item">
        <a href="#" class="nav_link">Intro</a>
    </div>
    <div class="nav_item">
        <a href="#" class="nav_link">Learn</a>
        <ul class="dropdown">
            <li>
                <a href="#">HTML</a>
            </li>
            <li>
                <a href="#">CSS</a>
            </li>
        </ul>
    </div>
    <div class="nav_item">
        <a href="#" class="nav_link">About</a>
        <ul class="dropdown">
            <li>
                <a href="#">FAQ</a>
            </li>
            <li>
                <a href="#">The Author</a>
            </li>
        </ul>
    </div>
    <div class="nav_item">
        <a href="#" class="nav_link">Support</a>
    </div>
    <div class="nav_item">
        <a href="#" class="nav_link">Contact</a>
    </div>
</nav>

这是明显语法错误的 jQuery 代码：

$(".nav_item").click(function() {
    $(this.".dropdown").css("display", "block");
});

还有另一种方法在 CSS 中明显不正确：

.nav_item:hover {
    this.dropdown {
        display: block;
    }
}

Answer 1

试试这个：

$(".nav_item").click(function() {
    $(this).find(".dropdown").css("display", "block");
});

使用悬停做类似的事情：

$(".nav_item").hover(
    function(){ $(this).find('.dropdown').css('display', 'block'); },
    function(){ $(this).find('.dropdown').css('display', 'none'); }
);