jquery - 如何更改 css 类 onclick？

Question

我有一个导航栏。我想将其设置为当用户单击 departments 选项卡时，css div 将向下滑动并显示一些内容。我想用 2 个伪类来设置它。例如

dropdown.hide, .dropdown.show". dropdown.hide

将位于标题上方并向下滑动(使用 css 转换)，当用户单击部门选项卡时，它将转换为新类 (.show)。关于如何实现这一目标的任何想法？

这是我的 current code . (请原谅毛刺边缘)

提前致谢:)

Answer 1

您可以混合使用 jQuery(用于更改类)和 CSS3(用于转换)。所以，你的 CSS 设置得很好，并确保你设置了这两个参数:

.dropdown.show {transition: all 2s ease;}
.dropdown.hide {transition: all 2s ease;}

现在对于 jQuery 部分，我们将使用它来更改点击时的类。

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

为此，您需要拥有 .dropdown , 位于链接旁边。这会附加到单击事件处理程序。如果你想在:hover ，您可以使用此代码:

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

如果您计划为每个菜单项设置不同的子菜单，则需要将它们添加到 <a href...>...</a> 旁边nav > ul > li 内的标签.示例代码为:

<div class="wrapper">
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
                <div class="dropdown hide">
                    <!-- Dropdown Menu -->
                </div>
            </li>
        </ul>
    </nav>
</div>

在我看来，你不应该为同一个 div 使用两个类. .hide和 .show不需要。相反，只有 .hide默认并在 .show 之间切换!