Question

我使用CSS制作点击动画，单击时可以正常工作，但在第二次点击时动画不起作用。点击事件被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添加到代码中，以便从菜单项中将{hover事件侦听器unbind添加到其中：

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

我不确定我是否选择了正确的选择器，如果没有，则进行测试和评论。

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

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

1 个答案: