javascript - 响应式菜单 - 移动滚动消失

Question

我有一个名为 flexy menu 的插件。它工作得很好，但是当你在手机上查看并滚动时它会关闭，所以你无法点击链接。有没有办法让菜单保持打开状态，直到单击链接或单击菜单按钮？

您可以在此处实时查看它的运行情况: http://botsondaniels.com

HTML:

<ul id="menu-primary" class="flexy-menu">
    <li class="menu-item"><a href="http://botsondaniels.com/">Home</a></li>
    <li class="menu-item"><a href="http://botsondaniels.com/services/">Services</a></li>
    <li class="menu-item"><a href="http://botsondaniels.com/management/">Management Systems</a></li>
    <li class="menu-item"><a href="http://botsondaniels.com/accreditations/">Accreditations</a></li>
    <li class="menu-item"><a href="http://botsondaniels.com/training/">Training</a></li>
    <li class="menu-item"><a href="http://botsondaniels.com/environmental/">Environmental</a></li>
    <li class="menu-item"><a href="http://botsondaniels.com/testimonials/">Testimonials</a></li>
    <li class="menu-item"><a href="http://botsondaniels.com/about/">About Us</a></li>
    li class="menu-item"><a href="http://botsondaniels.com/contact/">Contact</a></li>
</ul>

JQUERY:

$.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='menu-text'>MENU</span> <span class='icon'><em></em><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]);
        }       
    }
}

CSS:

/* Navigation Styles*/
.nav-wrap   {
    background-color:#ffffff;
    width:100%;
    height:auto;
    border-bottom:1px solid #dde0e2;
}

.top-logo   {
    width:330px;
    height:53px;
    margin-top:30px;
    margin-bottom:14px;
    display:block;
}

.phone  {
    font-family: 'alwyn_new_rgregular';
    color:#008e7f;
    font-size:18px;
    line-height:22px;
    text-align:right;
    margin-top:35px;
    margin-bottom:0px;
    display:block;
}

.email  {
    font-family: 'alwyn_new_rgregular';
    color:#58585a;
    font-size:16px;
    line-height:22px;
    text-align:right;
    margin-bottom:0px;
    display:block;
}

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

.flexy-menu {
    width: auto;
    margin:0;
    padding: 0;
    height:34px;
    position:relative;
    float:left;
    font-family: 'alwyn_new_rgregular';
    font-weight:400;
    list-style: none;
    z-index: 99999;
    padding-bottom:15px;
    padding-top:15px;
    display: table;
    table-layout: fixed;
    width:100%;

}
.flexy-menu li {
    display:inline-block;
    font-size:14px;
    padding:0;
    float:left;
    line-height: 20px;
    position:relative;
    background:#ffffff;
    display: table-cell;
    padding:5px;
}

.flexy-menu > li > a {
    padding:5px 12px 0px 12px; 
    color:#797a7d;
    height:28px;
    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;   
}
.flexy-menu li:hover > a,
.flexy-menu li.active a {
    background: #ecedef;
}


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

}
.flexy-menu ul {
    top: 32px;
    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:#797a7d;
    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;
}

.flexy-menu ul li a:hover {
    background:#ff6600; 
}

/*------------------------------------
    Collapsible menu configuration
------------------------------------*/
.flexy-menu > li.showhide{
    display: none;
    width: 100%;
    height: 55px;
    cursor: pointer;
    color:#797a7d;
}

.menu-text  {
    display:inline-block;
    padding-top:17px;
}

.flexy-menu > li.showhide img{
    margin-top: 5px;
}

.flexy-menu > li.showhide span.icon{
    margin: 19px 10px 0px 0px;
    float: left;
}
.flexy-menu > li.showhide .icon em{
    margin-bottom: 3px;
    display: block;
    width: 20px;
    height: 2px;
    background: #ccc;
}

/*****************************************************************************
                            Responsive design
*****************************************************************************/
@media only screen and (max-width: 960px) {

    .top-logo   {
    width:250px;
    height:40px;
    margin-top:30px;
    margin-bottom:14px;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.phone  {
    text-align:center;
    margin-top:10px;
}

.email  {
    text-align:center;
}

.flexy-menu {
        width: 100%;
        margin:0;
        padding: 0;
        height:auto;
        position:relative;
        float:left;
        font-family: 'alwyn_new_rgregular';
        font-weight:300;
        list-style: none;
}

    .flexy-menu li{
        display: block;
        width: 100%;
        margin-right:0px;   
    }
    .flexy-menu > li > a{
        padding-top:15px;
        padding-bottom:30px;
        padding-left: 25px;
        border-bottom:1px solid #dde0e2;
    }
    .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;
    }
}

Answer 1

您的菜单在向下滚动时隐藏，因为您在调整大小时调用了函数: $(window).resize(function() { 屏幕尺寸(); });只是想让你知道滚动页面也会调用调整大小功能，这就是它关闭菜单的原因。希望你能发现你的错误:)