如何向子菜单 ul 添加淡入淡出或滑动效果

Question

我正在尝试将 Jquery 效果或 CSS 淡入/滑动添加到我的子菜单，但似乎无法使其正常工作。 ul sub nav 在我的 CSS 中设置为不显示。然后，当您单击带有类下拉切换的“a”标签时，它会在这个子 ul 中添加类“显示子菜单”（现在，在我的 CSS 中显示块）。我的代码如下；

HTML：

<ul class="nav-list">
    <li><a href="index.html">Home</a></li>
    <li>
        <a class="dropdown-toggle" title="About Us">About Us</a>
        <ul>
            <li><a href="about-us.html">About Our Business</a></li>
            <li><a href="meet-the-team.html">Meet The Team</a></li>
        </ul>
    </li>
</ul>

我的jquery如下：

$('a.dropdown-toggle').click(function(e) {
    $(this).next().toggleClass('display-sub-menu', 250);
}); 

目前这只是隐藏和显示。如果我使用 slideToggle 等，则没有幻灯片的效果

Answer 1

您可以使用.fadeToggle()/.slideToggle() 来切换淡入淡出/滑动来代替切换类

这两种方法都以持续时间作为参数，你可以传递 250 作为参数：

$('a.dropdown-toggle').click(function (e) {
    $(this).next().fadeToggle(250);
});

或

$('a.dropdown-toggle').click(function (e) {
    $(this).next().slideToggle(250);
});

Working Demo