Question

我正在创建一个导航栏，允许用户在悬停或单击链接后查看下拉菜单。每个链接都有一个称为“ nav_item”的类。有多个下拉菜单；每个人都有一个称为“下拉菜单”的类。将鼠标悬停在“ nav_item”上之后，具有“下拉列表”类的子元素应设置为“ 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'); }
);

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

1 个答案: