Question

大家好..

只是问题......我尝试使用animate.css和js动画下拉菜单它的工作，但不是我真正想要的东西:)

我尝试使用 addClass 和 removeClass ，但没有......

可以制作动画 - 将鼠标悬停在菜单上而不是打开下拉列表。

code:
    $(function() {
        $('.dropdown-toggle').hover(function() {
            $(this).next('.dropdown-menu').addClass('open animated fadeInDown');

        });
    });

如果有人有想法请告诉我:)谢谢

Answer 1

您应该将开放课程添加到下拉列表而不是下拉菜单：

$(function() {
    $('.dropdown-toggle').hover(function() {
        $('.dropdown').addClass('open');
        $('.dropdown-menu').addClass('animated fadeInDown');

    });
    $('.dropdown').on('hide.bs.dropdown', function () {
        $('.dropdown-menu').removeClass('animated fadeInDown');
    });
});

Answer 2

如果有很多下拉菜单，上面的代码将使所有这些菜单都具有动画效果。我对答案的代码进行了以下修改：

$(function() {
    $('.dropdown-toggle').hover(function() {
        $(this).addClass('open');
        $(this).next('.dropdown-menu').addClass('animated slideInDown');

    });
    $('.dropdown').on('hide.bs.dropdown', function () {
        $(this).next('.dropdown-menu').removeClass('animated slideInDown');

    });
});

Animate.css用于下拉菜单

2 个答案: