jquery - Animate.css 用于下拉菜单

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');

    });
});