如何让Bootstrap 4的滑动下拉菜单恢复动画？

Question

我是新来的，所以我希望我可以尽可能的清楚我的问题:-)

好吧，我正在Bootstrap 4中做一个相当简单的下拉菜单。有相当多的代码，因为我想控制它的每一个方面，我已经奠定了它的方式是相当混乱的，因为这是测试阶段，但希望你会看到它是相当容易得到什么是怎么回事，因为我把注释无处不在，并标明一切！我想使用动画来控制它。

我想用Animation来滑动NavBar下拉菜单，并通过切换点击来实现。我在网上找到了一个使用过渡的演示，效果相当不错，但在手机上却出现了错误。这个bug是，如果你在3秒后点击按钮关闭，菜单就会突然关闭，而不是滑动关闭。每次都是要滑动关闭的。从我看到的例子来看，这似乎是一个一致的bug。

因此，我正在尝试用动画来代替，它们可以做得更多，而且我可以对元素有更多的控制。

我已经研究出如何使用动画来向下滑动菜单。

    CustomJQ('.dropdown').on('show.bs.collapse', function() {   // Dropdown Menu button is in the transition process of sliding down //

              CustomJQ(this).find(".dropdown-menu").first().removeClass('MonkeeClassAnimationDown')
              CustomJQ(this).find(".dropdown-menu").first().addClass('MonkeeClassAnimationDown')

    });

"MonkeeClassAnimationDown "是我的动画类，每次都能很好地工作，不透明度渐渐消失，它就会向下滑动

现在棘手的是--我找不到正确的Bootstrap类或函数，用通俗的话说："当NavBar Menu Button再次被点击切换时--移除Animation Down类并添加Animation Up类"。Up类我已经准备好了，我只是不知道如何应用它。

下面是链接。

http:/tunedinevents.co.uk__TestingTop_NavBar_Dropdown_Menu。

http:/tunedinevents.co.uk__TestingTop_NavBar_Dropdown_Menu_CustomCSS。

http:/tunedinevents.co.uk__TestingTop_NavBar_Dropdown_Menu_CustomJavascriptsCustomJS.js。

如果有人破解了这个问题，可能甚至不需要查看代码......如果你知道Bootstrap JS函数，我可以应用我的向上动画时切换点击，这将是巨大的！希望我足够清楚。

希望我说的够清楚......谢谢 :-)

Answer 1

我很高兴的说，我实际上已经解决了这个问题:-)

            // SUB DROPDOWN MENU TITLE BUTTONS //

            CustomJQ('.dropdown').on('show.bs.collapse', function() {   // Dropdown Menu button is in the transition process of sliding down //

             CustomJQ(this).find('.hide.bs.collapse').first().removeClass('MonkeeClassDelayClosingDropdownMenu');

              CustomJQ(this).on('.dropdown').addClass('MonkeeClassTopMenuMainButtonClick');  // Unhighlight the Sub Menu Title //

              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationUp');
              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationDown');
              CustomJQ(this).find('.dropdown-menu').first().addClass('MonkeeClassAnimationDown');

              CustomJQ('.MonkeeClassNavBarBackground').removeClass('peru orange yellow lime plum olive indigo');
              CustomJQ('.MonkeeClassNavBarBackground').addClass('olive');

            });

            CustomJQ('.dropdown').on('hide.bs.collapse', function() {  // Dropdown Menu button has just finished the process of sliding up //

              CustomJQ(this).find('.hide.bs.collapse').first().removeClass('MonkeeClassDelayClosingDropdownMenu');
              CustomJQ(this).find('.hide.bs.collapse').first().addClass('MonkeeClassDelayClosingDropdownMenu');

              CustomJQ(this).on('.dropdown').removeClass('MonkeeClassTopMenuMainButtonClick');  // Unhighlight the Sub Menu Title //

              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationUp');
              CustomJQ(this).find('.dropdown-menu').first().removeClass('MonkeeClassAnimationDown');
              CustomJQ(this).find('.dropdown-menu').first().addClass('MonkeeClassAnimationUp'); 

              CustomJQ('.MonkeeClassNavBarBackground').removeClass('peru orange yellow lime plum olive indigo');
              CustomJQ('.MonkeeClassNavBarBackground').addClass('plum');

            });