レスポンシブメニュー - モバイルスクロールの表示が消える

Question

フレキシブルメニューと呼ばれるプラグインがあります。それは素晴らしい動作しますが、携帯電話で見るとスクロールすると閉じますので、リンクをクリックすることはできません。リンクをクリックするかメニューボタンをクリックするまでメニューを開いたままにする方法はありますか？あなたはここに住んで働いて、それを見ることができます

： 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（）{ screenSize（）; }）; ちょうどあなたがスクロールするページもresize関数を呼び出すことを知らせたいと思うので、それがメニューを閉じるのです。 あなたは間違いを見つけることを願っています:)