无法动画第二次点击 jquery/css

Question

我正在使用 CSS 对点击进行动画处理，单击时会起作用，但在第二次点击时动画不起作用。 click 事件被 jQuery 覆盖（主要是为了允许下拉菜单作为点击事件而不是悬停打开）。

我在我的 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 菜单项中的悬停事件侦听器：

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

我不确定我的选择器是否正确，如果没有，请测试并评论。

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