手機（iPhone）上的CSS3響應菜單下拉菜單在滾動時消失

Question

我正在debrioconsulting.com上測試emre的CSS3響應菜單下拉菜單+子菜單寬度徽標筆的版本。 在台式機瀏覽器（到目前為止，僅Mac）中查看時，大多數情況下一切正常。 但是，當我在下拉菜單處於打開狀態的iPhone（運行iOS 10.3.1的6 Plus）上對其進行測試時，我開始滾動，打開菜單消失了。

再次的網站是debrioconsulting.com

這是我正在使用的CSS：

/*----------------nav styles---------------------*/

nav {
  position: relative;
  width: 980px;
  /*margin: 0 auto;*/
    margin-top: -60px;
}

#cssmenu {
    font: normal 14px Arial, Helvetica, sans-serif;
}

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

#cssmenu:after, #cssmenu>ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #head-mobile {
  display: none;
}

#cssmenu>ul>li {
  float: left;
    border-right: 1px solid #FFF;
}

#cssmenu ul li.last {
    border-right: 0;
    }

#cssmenu>ul>li>a {
    padding: 0 29px 0 29px;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #FBFCE8;
}

#cssmenu>ul>li:hover>a, #cssmenu ul li.active a {
  color: #E6FF71;
}

@media screen and (max-width:920px) {

  nav {
    width: 100%;
  }
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu ul li {
    width: 100%;
        border-top: 1px solid rgba(251, 252, 252,0.5);
        background-color: #3B5921;
  }
  #cssmenu ul li:hover {
    background: #A4C74F;
  }

  #cssmenu > ul > li {
    /*float: none;*/
        padding: 25px;
        border-right: 0;
  }

  #cssmenu #head-mobile {
    display: block;
    padding: 23px;
    font-size: 14px;
    font-weight: normal;
  }
  .button {
    width: 55px;
    height: 46px;
    position: absolute;
    right: 0;
    top: -15px;
    cursor: pointer;
    z-index: 12399994;
  }
  .button:after {
    position: absolute;
    top: 22px;
    right: 20px;
    display: block;
    height: 8px;
    width: 28px;
    border-top: 2px solid #FBFCE8;
    border-bottom: 2px solid #FBFCE8;
    content: '';
  }
  .button:before {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    top: 16px;
    right: 20px;
    display: block;
    height: 2px;
    width: 28px;
    background: #FBFCE8;
    content: '';
  }
  .button.menu-opened:after {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    top: 23px;
    border: 0;
    height: 2px;
    width: 27px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .button.menu-opened:before {
    top: 23px;
    background: #fff;
    width: 27px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

這是js

(function($) {
      $.fn.menumaker = function(options) {
        var cssmenu = $(this),
          settings = $.extend({
            format: "dropdown",
            sticky: false
          }, options);
        return this.each(function() {
          $(this).find(".button").on('click', function() {
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.slideToggle().removeClass('open');
            } else {
              mainmenu.slideToggle().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
          cssmenu.find('li ul').parent().addClass('has-sub');
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').slideToggle();
              } else {
                $(this).siblings('ul').addClass('open').slideToggle();
              }
            });
          };
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
          if (settings.sticky === true) cssmenu.css('position', 'fixed');
          resizeFix = function() {
            var mediasize = 920;
            if ($(window).width() > mediasize) {
              cssmenu.find('ul').show();
            }
            if ($(window).width() <= mediasize) {
              cssmenu.find('ul').hide().removeClass('open');
            }
          };
          resizeFix();
          return $(window).on('resize', resizeFix);
        });
      };
    })(jQuery);

    (function($) {
      $(document).ready(function() {
        $("#cssmenu").menumaker({
          format: "multitoggle"
        });
      });
   })(jQuery);

我還使用筆的確切代碼創建了一個包含測試文件的子目錄，並且電話上發生了同樣的事情-打開時菜單消失，滾動條消失了。

編輯為菜單添加html ...

<nav id="cssmenu">
        <div id="head-mobile"></div>
        <div class="button"></div>
        <ul>
          <li class="first active"><a href="http://debrioconsulting.com/" title="Home">Home</a></li>
          <li><a href="about" title="About">About</a></li>
          <li><a href="benefits" title="Benefits">Benefits</a></li>
          <li><a href="services" title="Services">Services</a></li>
          <li><a href="clients" title="Clients">Clients</a></li>
          <li class="last"><a href="contact" title="Contact">Contact</a></li>
        </ul>
</nav>

Answer 1

看起來注釋掉以下兩行可以解決問題。 感謝@ gbishop3為我指出正確的方向。

// if ($(window).width() <= mediasize) { // cssmenu.find('ul').hide().removeClass('open'); // }