无法为第二次单击的jQuery / css设置动画

Question

我正在使用CSS为单击动画，当单击时可以使用CSS，但是在第二次单击时动画不起作用。 jQuery将覆盖click事件（主要是允许将下拉菜单作为click事件而不是悬停来打开）。

我在CSS中做错了吗？ 还是应该使用jQuery动画下拉菜单？

您可以在这里查看： http : //elevationspa.wpengine.com

这是“服务”选项卡。

导航：

<nav id="top-menu-nav">
    <ul id="top-menu" class="nav">
        <li id="menu-item-95" class="mega-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-95"><a href="#">Services</a>
            <ul class="sub-menu">
                <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://elevationspa.wpengine.com/massage/">Massage</a></li>
                <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://elevationspa.wpengine.com/nails/">Nails</a></li>
                <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://elevationspa.wpengine.com/hair/">Hair</a></li>
                <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://elevationspa.wpengine.com/esthetics/">Esthetics</a></li>
                <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://elevationspa.wpengine.com/acupuncture/">Acupuncture</a></li>
            </ul>
        </li>
    </ul>
</nav>

JS：

<script type="text/javascript">
(function($) {

    function setup_collapsible_submenus() {
        var $menu = $('#top-menu'),
            top_level_link = '#top-menu .menu-item-has-children > a';

        $menu.find('a').each(function() {
            $(this).off('click');

            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }

            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            } 
        });
    }

    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus()
        }, 1000);
    });

})(jQuery);
</script>

CSS：

#main-header #top-menu ul.sub-menu {
        display: none !important;
        visibility: hidden !important;
        transition: all 0.7s ease-in-out;
        animation: gridFadeIn 0.7s ease-in-out both;
      }
#main-header #top-menu .visible  ul.sub-menu {
        display: block !important;
        visibility: visible !important;
        transition: all 0.7s ease-in-out;
        opacity: 1;
        animation: gridFadeIn 0.7s ease-in-out both;
      }
@keyframes grideFadeIn {
  0% {
    opacity: 0;
    transform: translatey(-5%);
  }
    100% {
      opacity: 1;
      transform: translatey(0);
    }
}

Answer 1

除了类的opacity ，您不需要其他可见性属性：

#main-header #top-menu ul.sub-menu {
    opacity: 0;
    transition: all 0.7s ease-in-out;
    animation: gridFadeIn 0.7s ease-in-out both;
  }
#main-header #top-menu .visible  ul.sub-menu {
    transition: all 0.7s ease-in-out;
    opacity: 1;
    animation: gridFadeIn 0.7s ease-in-out both;
  }
@keyframes grideFadeIn {
  0% {
    opacity: 0;
    transform: translatey(-5%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

这是CSS小提琴https://jsfiddle.net/9vmeo97d/5/
抱歉，这有点混乱。

- 加成 -

比起初我想的要复杂一些。显示悬停时的子菜单来自jQuery的WP主题。 假设其他悬停样式是使用CSS完成的（看上去），请将此jQuery添加到代码中以从菜单项中unbind悬停事件监听器的unbind ：

$('.menu-item-has-children li').off('mouseenter mouseleave');

我不确定选择器是否正确，如果不正确，请进行测试和评论。

确保此脚本在http://elevationspa.wpengine.com/wp-content/themes/Divi/js/custom.js?ver=3.0.35之后运行。