Javascript 响应菜单问题

好吧，我没有足够的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>

以下是我的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]);
        }       
    }
}

---

这里的问题是因为你在.flexy菜单类中添加了一些东西，但是如果你检查你的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="">

---

你能展示你的html吗？老实说，我不认为需要一个完整的插件来完成这么简单的任务。可能只要css和一点togglin类的js就可以了。。我要为你做一把小提琴you@DanielOrtiz我已经为您更新了html。我已经将旧的静态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="">

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


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