響應式菜單問題

Question

好吧，我對JS沒有足夠的了解，甚至不知道這可能是什么。

我的導航菜單已停止在移動設備上工作。

如果將瀏覽器的大小調整為“移動”，然后返回到桌面，然后返回“移動”，菜單將顯示菜單圖標3次，如果重復此操作，它會重復復制，但第一次打開后不會關閉。

您可以在這里實時查看qubecatering.com

我不知道這可能是什么代碼。

任何幫助將是巨大的！ 我使用的是flexymenu插件，並且在很多站點上都使用過它，從來沒有問題。

這是HTML：

<div class="flexy-menu"><ul id="menu-primary" class="flexy-menu"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-20"><a href="http://qubecatering.com/">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://qubecatering.com/about/">About</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://qubecatering.com/case-studies/">Case Studies</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://qubecatering.com/services/">Services</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://qubecatering.com/contact/">Contact</a></li>
</ul></div>

但是這是我的CSS：

.nav-wrapper {
    background-color:#ffffff;
    width:100%;
    height:auto;
}

.nav-inner {
    width:100%;
    max-width:960px;
    height:60px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

.nav-logo   {
    height:60px;
    width:auto;
    display:inline-block;
}

/*******************************************************************************
                            Default configuration
*******************************************************************************/

.flexy-menu {
    width: auto;
    margin:0;
    padding: 0;
    height:60px;
    position:relative;
    float:right;
    list-style: none;
    z-index: 99999;
    display:inline-block;
}

.flexy-menu li {
    display:inline-block;
    padding:0;
    float:right;
    position:relative;
}
.flexy-menu > li > a {
    padding:23px 15px 5px 15px; 
    height:32px;
    text-decoration:none;
    display:block;
    -webkit-transition:color 0.2s linear, background 0.2s linear;   
    -moz-transition:color 0.2s linear, background 0.2s linear;  
    -o-transition:color 0.2s linear, background 0.2s linear;    
    transition:color 0.2s linear, background 0.2s linear;   

    font-family: 'latoregular';
    font-size:14px;
    color:#32455c;
    text-transform:uppercase;
}
.flexy-menu > li > a:hover, .flexy-menu > li > a:focus, .flexy-menu > li > a:active {
    background-color:#835db1;
    color:#ffffff;
}


/*-----------------------------
    Drop down configuration
-----------------------------*/
.flexy-menu ul, 
.flexy-menu ul li ul {
    list-style: none;
    margin-left: 5px;
    padding: 0;  
    display: none;
    position: absolute;
    z-index: 99999;
    width: 200px;

}
.flexy-menu ul {
    top: 100px;
    left: 0;
}
.flexy-menu ul li ul {
    top: 0;
    left: 100%;
}

.flexy-menu ul li {
    clear:both;
    width:100%;
    border: none;
    font-size:12px;
}
.flexy-menu ul li a {
    padding:15px 20px;
    width:100%;
    color:#dedede;
    font-size:13px;
    text-decoration:none;
    display:inline-block;
    float:left;
    clear:both;
    box-sizing:border-box;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box;
    -webkit-transition:color 0.2s linear, background 0.2s linear;   
    -moz-transition:color 0.2s linear, background 0.2s linear;  
    -o-transition:color 0.2s linear, background 0.2s linear;    
    transition:color 0.2s linear, background 0.2s linear;
    border-bottom: 1px solid rgba(61, 71, 82, 0.8); 
}

.flexy-menu ul li a:hover {

}

/*-----------------------------
    Drop down indicators
-----------------------------*/
.flexy-menu > li .indicator{
    position: absolute;
    color: #7995a7;
    top: 39px;
    right: 8px;
    font-size: 17px;
}
.flexy-menu ul > li .indicator{
    top: 10px;
    right: 8px;
}

/*------------------
    Preset sizes
------------------*/
.thin > li > a{
    padding: 10px 22px;
}
.thin ul{
    top: 40px;
}
.thin > li .indicator{
    top: 10px;
}

.thick > li > a{
    padding: 40px 22px;
}
.thick ul{
    top: 100px;
}
.thick > li .indicator{
    top: 40px;
}

/*------------------------------------
    Collapsible menu configuration
------------------------------------*/
.flexy-menu > li.showhide{
    display: none;
    width: 30%;
    height: 60px;
    cursor: pointer;
}

.flexy-menu > li.showhide span.icon{
    margin: 23px 30px;
    float: right;
}
.flexy-menu > li.showhide .icon em{
    margin-bottom: 4px;
    display: block;
    width: 25px;
    height: 3px;
    background: #aad730;
}

/*****************************************************************************
                            Responsive design
*****************************************************************************/
@media only screen and (max-width: 768px) {
    .flexy-menu {
        width: 50%;
        margin:0;
        padding: 0;
        position:absolute;
        top:0px;
        right:0px;
        list-style: none;
    }
    .flexy-menu li{
        display: block;
        width: 100%;
        background-color:#ffffff;
    }
    .flexy-menu > li > a{
        padding-top:15px;
        padding-bottom:30px;
        padding-left: 25px;
        border-bottom:1px solid #d3d3d3;
    }

    .flexy-menu li:hover > a,
    .flexy-menu li.active a {
        border-bottom:1px solid #d3d3d3;
}

    .flexy-menu a{
        width: 100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box; 
        -webkit-box-sizing:border-box; 
    }
    .flexy-menu ul {
        top: 60px;
        left: 0;
    } 
    .flexy-menu ul,
    .flexy-menu ul li ul{
        position: static;
    }
    .flexy-menu ul li ul,
    .flexy-menu ul li {
        border-left: none;
        border-right: none;
    }
    .flexy-menu ul li a,
    .flexy-menu.vertical ul li a    {
        padding-top:15px;
        padding-bottom:15px;
    }
    .flexy-menu ul > li > a{
        padding-left: 40px !important;
    }
    .flexy-menu > li .indicator{
        top: 15px;
        right: 25px;
        font-size: 17px;
    }
    .flexy-menu ul > li .indicator{
        display: none;
    }
}

這是我的JavaScript：

$.fn.flexymenu = function(options){
    var settings = {
        speed               : 300,                  // dropdown speed (ms)
        type                : "horizontal",         // menu type arrangement
        align               : "right",              // menu alignment (horizontal type)
        indicator           : false                 // indicator that indicates a submenu
    }
    $.extend( settings, options );

    var bigScreen = false;

    if(settings.type == "vertical"){
        $(".flexy-menu").addClass("vertical");
        if(settings.align == "right"){
            $(".flexy-menu").addClass("right");
        }
    }

    if(settings.indicator == true){
        var num = 0;
        $(".flexy-menu").find("li").each(function(){
            if($(this).children("ul").length > 0){
                $(this).append("<span class='indicator'>+</span>");
            }
        });
    }

    $(".flexy-menu").prepend("<li class='showhide'><span class='icon'><em></em><em></em><em></em></span></li>");

    screenSize();

    $(window).resize(function() {
        screenSize();
    });

    function screenSize(){
        $(".flexy-menu").find("li").unbind();
        $(".flexy-menu").find("ul").hide(0);
        if(window.innerWidth <= 768){
            showCollapse();
            bindClick();
            if(bigScreen == true){
                rightAlignMenu();
                bigScreen = false;
            }
        }
        else{
            hideCollapse();
            bindHover();
            if(settings.type == "horizontal" && settings.align == "right" && bigScreen == false){
                rightAlignMenu();
                bigScreen = true;
            }
        }
    }

    function bindHover(){
        $(".flexy-menu li").bind("mouseover", function(){
            $(this).children("ul").stop(true, true).fadeIn(settings.speed);
        }).bind("mouseleave", function(){
            $(this).children("ul").stop(true, true).fadeOut(settings.speed);
        });
    }

    function bindClick(){
        $(".flexy-menu > li").bind("click", function(){
            if($(this).children("ul").css("display") == "none"){
                $(this).find("ul").slideDown(settings.interval);
            }
            else{
                $(this).children("ul").slideUp(settings.interval);
            }
        });
    }

    function showCollapse(){
        $(".flexy-menu > li:not(.showhide)").hide(0);
        $(".flexy-menu > li.showhide").show(0);
        $(".flexy-menu > li.showhide").bind("click", function(){
            if($(".flexy-menu > li").is(":hidden")){
                $(".flexy-menu > li").slideDown(300);
            }
            else{
                $(".flexy-menu > li:not(.showhide)").slideUp(300);
                $(".flexy-menu > li.showhide").show(0);
            }
        });
    }

    function hideCollapse(){
        $(".flexy-menu > li").show(0);
        $(".flexy-menu > li.showhide").hide(0);
    }   

    function rightAlignMenu() {
        $(".flexy-menu > li").addClass("right");
        var menuWidth = $(".flexy-menu").width();
        var menuItems = $(".flexy-menu").children("li");
        $(".flexy-menu").children("li:not(.showhide)").detach();
        for(var i = menuItems.length; i >= 1; i--){
            $(".flexy-menu").append(menuItems[i]);
        }       
    }
}

Answer 1

您遇到的問題是因為您將內容附加到了“ .flexy-menu”類中，但是如果您檢查html，我發現您在兩個地方添加了該類，這就是復制的方式

<div class="flexy-menu">
    <li class="showhide right" style="display: none;"><span class="icon"><em></em><em></em><em></em></span>
    </li>
    <ul id="menu-primary" class="flexy-menu" style="">

嘗試將其從元素中刪除

編輯

大！ 無論如何，我強烈建議您下次使用其他方法。 您可以只使用javascript來切換導航欄上的類，並使用CSS來顯示和隱藏菜單。 就這么簡單

(function () {
    var navBar = document.querySelector('.nav-bar'),
        toggleButton = document.querySelector('.toggle-button');


    toggleButton.addEventListener("click", function () {
        navBar.classList.toggle('active');
    });
})();