Hamburgler.js按钮在移动设备上无法使用 [英] Hamburgler.js button not working on mobile devices

问题描述

我已经实现了 hamburger.js 。当我尝试在移动设备上显示我的网站菜单时，关闭按钮将不起作用。

这是我的网站： http://johnm.io/project/hamburgler/

示例：：

  function togglescroll（）{$（'body'）。on（'touchstart'，function（e） if（$（'body'）。hasClass（'noscroll'））{e.preventDefault（）;}}）;} $（document）.ready（function（）{togglescroll（）$（。点击（function（）{$（。mobilenav）。fadeToggle（500）; $（top-menu）。toggleClass（top-animate）; $（body）。toggleClass（noscroll ）; $（。mid-menu）。toggleClass（mid-animate）; $（bottom-menu）。toggleClass（bottom-animate）;}）;}）; KEY TO EXIT $（document）.keydown（function（e）{if（e.keyCode == 27）{$（。mobilenav）。fadeOut（500）; $（。top-menu）。removeClass top-animate）; $（body）。removeClass（noscroll）; $（。mid-menu）。removeClass（mid-animate）; $（。bottom-menu）。removeClass（bottom-animate）; }}）;  

  * {font-family：'helvetica ue -webkit-tap-highlight-color：rgba（0，0，0，0）; -webkit-tap-highlight-color：transparent; / *对于一些Androids * /}。top-animate {background：#fff！important; top：13px！important; -webkit-transform：rotate（45deg）; transform：rotate（45deg）;}。middle-animate {opacity：0;}。bottom-animate {background：#fff！important; top：13px！important; -webkit-transform：rotate（-225deg）; transform：rotate（-225deg）;}。top-menu {top：5px; width：25px; height：2px; border-radius：10px; background-color：＃F9A530;}。mid-menu {top：13px; width：25px; height：2px; border-radius：10px; background-color：＃F9A530;}。bottom-menu {top：21px; width：25px; height：2px; border-radius：10px; background-color：＃F9A530;}。menui {background：orange;}过渡：0.6s缓解; transition-timing-function：cubic-bezier（.75，0，.29，1.01）; margin-top：10px; position：absolute;}。icon {z-index：999;位置：固定;显示：block; padding：9px; height：32px; width：32px; margin：0px; top：0; left：0;}。mobilenav {font-family：inherit; top：0; left：0; z-index：999; display：none;位置：固定; width：100％;高度：100％; background：orange;}。mobilenav li {list-style-type：none; text-align：center; padding：10px;}。mobilenav li a {font-size：150％; color：#fff; text-decoration：none; font-weight：300; width：100％;}。mobilenav li：first-child {margin-top：60px;}  

 < div class =mobilenav> < li>< a href =＃>从不< / a> < / li> < li>< a href =＃> Gonna< / a> < / li> < li>< a href =＃>给< / a> < / li> < li>< a href =＃>您< / a> < / li> < li>< a href =＃>上< / a> < / li>< / div>< a href =javascript：void（0）class =icon> < div class =hamburger> < div class =menui top-menu>< / div> < div class =menui middle-menu>< / div> < div class =menui bottom-menu>< / div> < / div>< / a>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script>  
 

解决方案

body 正在侦听 touchstart 事件，如果他有类 noscroll - 这发生在菜单打开时 - 他做..好..没有，而不是做切换。

因此，我们必须做的是检查 touchstart 事件是否由按钮触发。

  // HAMBURGLERv2function togglescroll（）{$（'body'）。on （e）{//只添加检查：！$（e.target）.hasClass（'icon'）if（！$（e.target）.hasClass（'icon'）& ）.hasClass（'noscroll'））{e.preventDefault（）;}}）;} $（document）.ready（function（）{togglescroll（）$ （.mobilenav）。fadeToggle（500）; $（。top-menu）。toggleClass（top-animate）; $（body）。toggleClass（noscroll）; $ - menu）; toggleClass（mid-animate）; $（bottom-menu）。toggleClass（bottom-animate）;}）;} .keydown（function（e）{if（e.keyCode == 27）{$（。mobilenav）。fadeOut（500）; $（top- menu）removeClass（top-animate）; $（body）。removeClass（noscroll）; $（。mid-menu）removeClass（middle-animate ）; }}）;  

  * {font-family：'helvetica ue -webkit-tap-highlight-color：rgba（0，0，0，0）; -webkit-tap-highlight-color：transparent; / *对于一些Androids * /}。top-animate {background：#fff！important; top：13px！important; -webkit-transform：rotate（45deg）; transform：rotate（45deg）;}。middle-animate {opacity：0;}。bottom-animate {background：#fff！important; top：13px！important; -webkit-transform：rotate（-225deg）; transform：rotate（-225deg）;}。top-menu {top：5px; width：25px; height：2px; border-radius：10px; background-color：＃F9A530;}。mid-menu {top：13px; width：25px; height：2px border-radius：10px; background-color：＃F9A530;}。bottom-menu {top：21px; width：25px; height：2px; border-radius：10px; background-color：＃F9A530;}。menui {background：orange;过渡：0.6s缓解; transition-timing-function：cubic-bezier（.75，0，.29，1.01）; margin-top：10px; position：absolute;}。icon {z-index：999;位置：固定;显示：block; padding：9px; height：32px; width：32px; margin：0px; top：0; left：0;}。mobilenav {font-family：inherit; top：0; left：0; z-index：999; display：none;位置：固定; width：100％;高度：100％; background：orange;}。mobilenav li {list-style-type：none; text-align：center; padding：10px;}。mobilenav li a {font-size：150％; color：#fff; text-decoration：none; font-weight：300; width：100％;}。mobilenav li：first-child {margin-top：60px;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =mobilenav> < li>< a href =＃>从不< / a>< / li> < li>< a href =＃> Gonna< / a>< / li> < li>< a href =＃>给< / a>< / li> < li>< a href =＃>您< / a>< / li> < li>< a href =＃>向上< / a>< / li>< / div>< a href =javascript：void（0）class =icon> < div class =hamburger> < div class =menui top-menu>< / div> < div class =menui middle-menu>< / div> < div class =menui bottom-menu>< / div> < / div>< / a>  

笔也在这里代码： http://codepen.io/anon/pen/gayZYG

I've implemented hamburger.js. When I try to show the menu of my website on a mobile device, the close button won't work.

Here's my site: http://johnm.io/project/hamburgler/

Example:

function togglescroll() {
  $('body').on('touchstart', function(e) {
    if ($('body').hasClass('noscroll')) {
      e.preventDefault();
    }
  });
}

$(document).ready(function() {
  togglescroll()
  $(".icon").click(function() {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $("body").toggleClass("noscroll");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  });
});

// PUSH ESC KEY TO EXIT

$(document).keydown(function(e) {
  if (e.keyCode == 27) {
    $(".mobilenav").fadeOut(500);
    $(".top-menu").removeClass("top-animate");
    $("body").removeClass("noscroll");
    $(".mid-menu").removeClass("mid-animate");
    $(".bottom-menu").removeClass("bottom-animate");
  }
});

* {
  font-family: 'helvetica nue', sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  /* For some Androids */
}
.top-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.mid-animate {
  opacity: 0;
}
.bottom-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
}
.top-menu {
  top: 5px;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background-color: #F9A530;
}
.mid-menu {
  top: 13px;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background-color: #F9A530;
}
.bottom-menu {
  top: 21px;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background-color: #F9A530;
}
.menui {
  background: orange;
  transition: 0.6s ease;
  transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
  margin-top: 10px;
  position: absolute;
}
.icon {
  z-index: 999;
  position: fixed;
  display: block;
  padding: 9px;
  height: 32px;
  width: 32px;
  margin: 0px;
  top: 0;
  left: 0;
}
.mobilenav {
  font-family: inherit;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: orange;
}
.mobilenav li {
  list-style-type: none;
  text-align: center;
  padding: 10px;
}
.mobilenav li a {
  font-size: 150%;
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  width: 100%;
}
.mobilenav li:first-child {
  margin-top: 60px;
}

<div class="mobilenav">
  <li><a href="#">Never</a>
  </li>
  <li><a href="#">Gonna</a>
  </li>
  <li><a href="#">Give</a>
  </li>
  <li><a href="#">You</a>
  </li>
  <li><a href="#">Up</a>
  </li>
</div>

<a href="javascript:void(0)" class="icon">
  <div class="hamburger">
    <div class="menui top-menu"></div>
    <div class="menui mid-menu"></div>
    <div class="menui bottom-menu"></div>
  </div>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

解决方案

The problem was that the body is listening the touchstart event and if he "have" the class noscroll - which happen when the menu is open - he do.. well.. nothing, instead of doing the toggle.

So, the thing we have to do, is to check if the touchstart event fired by the button or not. If so, we do the toggle.

// HAMBURGLERv2

function togglescroll() {
  $('body').on('touchstart', function(e) {
    // Just add the check: !$(e.target).hasClass('icon')
    if (!$(e.target).hasClass('icon') && $('body').hasClass('noscroll')) {
      e.preventDefault();
    }
  });
}

$(document).ready(function() {
  togglescroll()
  $(".icon").click(function() {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $("body").toggleClass("noscroll");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  });
});

// PUSH ESC KEY TO EXIT

$(document).keydown(function(e) {
  if (e.keyCode == 27) {
    $(".mobilenav").fadeOut(500);
    $(".top-menu").removeClass("top-animate");
    $("body").removeClass("noscroll");
    $(".mid-menu").removeClass("mid-animate");
    $(".bottom-menu").removeClass("bottom-animate");
  }
});

* {
  font-family: 'helvetica nue', sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  /* For some Androids */
}

.top-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mid-animate {
  opacity: 0;
}

.bottom-animate {
  background: #fff !important;
  top: 13px !important;
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
}

.top-menu {
  top: 5px;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background-color: #F9A530;
}

.mid-menu {
  top: 13px;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background-color: #F9A530;
}

.bottom-menu {
  top: 21px;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background-color: #F9A530;
}

.menui {
  background: orange;
  transition: 0.6s ease;
  transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
  margin-top: 10px;
  position: absolute;
}

.icon {
  z-index: 999;
  position: fixed;
  display: block;
  padding: 9px;
  height: 32px;
  width: 32px;
  margin: 0px;
  top: 0;
  left: 0;
}

.mobilenav {
  font-family: inherit;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: orange;
}

.mobilenav li {
  list-style-type: none;
  text-align: center;
  padding: 10px;
}

.mobilenav li a {
  font-size: 150%;
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  width: 100%;
}

.mobilenav li:first-child {
  margin-top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobilenav">
  <li><a href="#">Never</a></li>
  <li><a href="#">Gonna</a></li>
  <li><a href="#">Give</a></li>
  <li><a href="#">You</a></li>
  <li><a href="#">Up</a></li>
</div>

<a href="javascript:void(0)" class="icon">
  <div class="hamburger">
    <div class="menui top-menu"></div>
    <div class="menui mid-menu"></div>
    <div class="menui bottom-menu"></div>
  </div>
</a>

I fixed the pen also with this code here: http://codepen.io/anon/pen/gayZYG

这篇关于Hamburgler.js按钮在移动设备上无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！