javascript - WordPress 上的响应菜单不流畅

Question

下午好。请告诉我如何使流畅的自适应菜单正常工作。在 WordPress 上 site对于模板文件中的菜单，结果是这段代码

<nav role="navigation" class="site-navigation main-navigation primary use-sticky-menu mobile-navigation" >
<div class="menu-primary_ru-container">
    <ul id="menu-primary_ru" class="menu" style="display: block;">
        <li id="menu-item-296" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-259 current_page_item menu-item-296">
            <a href="#>General</a>
        </li>
        <li id="menu-item-320" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-320">
            <a>
                <span class="icon"></span>Price</a>
            <ul class="sub-menu">
                <li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"><a href="#">Link</a></li>
                <li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392"><a href="#>Link</a></li>
                <li id="menu-item-391" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-391"><a href="#">Link</a></li>
                <li id="menu-item-390" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-390"><a href="#">Link</a></li>
            </ul>
            </li>
            <li id="menu-item-316" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-316"><a><span class="icon"></span>Buy</a>
                <ul class="sub-menu">
                    <li id="menu-item-424" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-424"><a href="#callback"><span class="icon"></span>Link</a></li>
                    <li id="menu-item-414" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-414"><a href="#>Link</a></li>
                    <li id="menu-item-413" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-413"><a href="#">Link</a></li>
                    <li id="menu-item-416" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-416"><a href="#">Link</a></li>
                </ul>
            </li>
        <li id="menu-item-400" class="menu_ct menu-item menu-item-type-custom menu-item-object-custom menu-item-400"><a href="#colophon"><span class="icon"></span>Link</a></li>
    </ul>
</div>
<a href="#" id="pull">Menu</a>

和 CSS

.main-navigation ul li {
        text-align: center;
        border-bottom: 2px solid #f5f6f3;
    }

    .main-navigation ul li:last-child {
        border: none;
    } 

    .main-navigation ul li ul li a {
        margin: 0 auto;
        text-align: center;
    }

    #masthead .menu-primary_ru-container ul,
    #masthead .menu-primary_et-container ul {
        display: none;
        opacity: 0;
        height: auto;
        position: absolute;
        background: #fff;
        margin: 0 100px 0 0;
        top: 60px;
    }

    #masthead .menu-primary_et-container ul {
        margin: 0 0 0 18%;
        width: 240px;
    }

    #masthead .menu-primary_et-container ul li ul {
        margin: 0;
    }

    #masthead #menu-primary_ru:before,
    #masthead #menu-primary_ru:after,
    #masthead #menu-primary_et:before,
    #masthead #menu-primary_et:after {
        content: " ";
        display: table;
    } 

    #masthead #menu-primary_ru:after,
    #masthead #menu-primary_et:after {
        clear: both;
    } 

    #masthead nav a#pull {
        display: block;
        visibility: visible;
        background-color: #283744;
        width: 100%;
        position: relative;
    }

    #masthead nav a#pull {
        content:"";
        background: url('images/nav-icon2.png') no-repeat;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        right: 24px;
        top: 10px;  
    }

    #menu-primary_ru li, 
    #menu-primary_et li {
        width: 244px;
        margin: 0 auto;
    }

    li.menu-item-has-children a:after {
        display: none;
    }

    #masthead:after {
        display: none;
    }

    #masthead .menu-primary_ru-container ul li ul, 
    #masthead .menu-primary_et-container ul li ul {
        top: 44px;
    }

还有JS在

<script>

    jQuery(function ($) {
    var pull        = $('#pull');
        menu        = $('.menu');
        menuHeight  = menu.height();

    $(pull).on('click', function(e) {

        $(".menu").animate({
            height: 'toggle',
            transition: 'all 0.3s ease-in-out',
            opacity: '1'
        }, 'slow');
    });

    $(window).resize(function(){
    var w = $(window).width();
    if(w > 425 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
    });
});
</script>

一般情况下，如果你在移动设备上打开页面，菜单出现，第一次很流畅，但第二次、第三次，流畅度消失，下拉菜单打开很快。 例如，取宽度为 425px、375px 和 320px。

Answer 1

好 friend 提出了解决问题的方法；出于某种原因，CSS 代码没有被处理:

    .main-navigation ul {
     -webkit-transition: background 0.5s ease;
       -moz-transition: background 0.5s ease;
         -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
            transition: background 0.5s ease;
}