Javascript 为什么我必须单击两次才能打开和关闭菜单

你好，我遇到了一个我不太了解的情况。我有以下设置：

$（文档）.ready（函数（）{
$（'.menuBtn'）。打开（'单击触摸'，函数（）{
$（this.toggleClass（'act'）；
if（$（this）.hasClass（'act'））{
$（'.mobileMenu'）.addClass（'act'）；
//$（'body'）.addClass（'positionfixed'）；
}
否则{
$（'.mobileMenu'）.removeClass（'act'）；
//$（'body'）.removeClass（'positionfixed'）；
}
});
});
.mobile菜单按钮{
显示：块；
位置：固定；
顶部：20px；
左：20px；
z指数：99；
背景色：#19b698；
填充物：5px10px；
颜色：#fff；
字体系列：开放式SAN；
字体大小：粗体；
}
.移动菜单按钮i{
字号：26px；
背景色：#00adee；
填充物：5px10px；
颜色：#fff；
}
移动电话{
背景色：#fff！重要；
位置：固定；
左：0；
排名：0；
z指数：100；
高度：100vh；
宽度：100vw；
显示：块；
文本对齐：居中；
不透明度：0；
-webkit过渡：所有500毫秒立方贝塞尔（0.68，-0.55,0.265,1.55）；
过渡：所有500毫秒立方贝塞尔（0.68，-0.55,0.265,1.55）；
-webkit变换：缩放（0）；
变换：比例（0）；
溢出：隐藏；
}
.mobileMenu img{
最大宽度：90%；
保证金：0自动；
边缘顶部：20px；
边缘底部：10px；
边框底部：1个点#717274；
垫底：20px；
}
美国行动法{
不透明度：1；
-webkit转换：规模（1）；
变换：比例（1）；
}
移动电话{
不透明度：1；
-webkit转换：translateX（0）；
变换：translateX（0）；
显示：块！重要；
}
移动电话{
显示：块；
垂直对齐：中间对齐；
}
李先生{
填充：10px 0！重要；
-webkit转换：所有400ms 510ms；
过渡：所有400ms和510ms；
不透明度：0；
}
.mobileMenu li:第n个孩子（单数）{
-webkit转换：translateX（30%）；
转化：translateX（30%）；
}
李：第n个孩子（偶数）{
-webkit转换：translateX（-30%）；
转化：translateX（-30%）；
}
李：最后一个孩子{
-webkit转换：无；
转化：无；
}
a.移动设备{
颜色：#00adee！重要；
显示：内联块；
字号：18px；
}
移动电话{
颜色：#fff；
}

打开
接近





问题是您正在检查按钮而不是菜单上的
.act
。有两个按钮，因此您需要切换两次

更改：

$(this).toggleClass('act');
if($(this).hasClass('act')) {

到

修正它：


$（文档）.ready（函数（）{
$（'.menuBtn'）。打开（'单击触摸'，函数（）{
$（'.mobileMenu'）。切换类（'act'）；
if（$（'.mobileMenu'）.hasClass（'act'））{
$（'.mobileMenu'）.addClass（'act'）；
//$（'body'）.addClass（'positionfixed'）；
}
否则{
$（'.mobileMenu'）.removeClass（'act'）；
//$（'body'）.removeClass（'positionfixed'）；
}
});
});
.mobile菜单按钮{
显示：块；
位置：固定；
顶部：20px；
左：20px；
z指数：99；
背景色：#19b698；
填充物：5px10px；
颜色：#fff；
字体系列：开放式SAN；
字体大小：粗体；
}
.移动菜单按钮i{
字号：26px；
背景色：#00adee；
填充物：5px10px；
颜色：#fff；
}
移动电话{
背景色：#fff！重要；
位置：固定；
左：0；
排名：0；
z指数：100；
高度：100vh；
宽度：100vw；
显示：块；
文本对齐：居中；
不透明度：0；
-webkit过渡：所有500毫秒立方贝塞尔（0.68，-0.55,0.265,1.55）；
过渡：所有500毫秒立方贝塞尔（0.68，-0.55,0.265,1.55）；
-webkit变换：缩放（0）；
变换：比例（0）；
溢出：隐藏；
}
.mobileMenu img{
最大宽度：90%；
保证金：0自动；
边缘顶部：20px；
边缘底部：10px；
边框底部：1个点#717274；
垫底：20px；
}
美国行动法{
不透明度：1；
-webkit转换：规模（1）；
变换：比例（1）；
}
移动电话{
不透明度：1；
-webkit转换：translateX（0）；
变换：translateX（0）；
显示：块！重要；
}
移动电话{
显示：块；
垂直对齐：中间对齐；
}
李先生{
填充：10px 0！重要；
-webkit转换：所有400ms 510ms；
过渡：所有400ms和510ms；
不透明度：0；
}
.mobileMenu li:第n个孩子（单数）{
-webkit转换：translateX（30%）；
转化：translateX（30%）；
}
李：第n个孩子（偶数）{
-webkit转换：translateX（-30%）；
转化：translateX（-30%）；
}
李：最后一个孩子{
-webkit转换：无；
转化：无；
}
a.移动设备{
颜色：#00adee！重要；
显示：内联块；
字号：18px；
}
移动电话{
颜色：#fff；
}

打开
接近





您应该使用下面的
jQuery
代码而不是您的：

$(document).ready(function(){
  $('.menuBtn').on('click touch', function () {
    $(this).toggleClass('act');
    if(!$('.mobileMenu').hasClass('act')) {
      $('.mobileMenu').addClass('act');
      //$('body').addClass('positionfixed');
    }
    else {
      $('.mobileMenu').removeClass('act');
      //$('body').removeClass('positionfixed');
    }
  });
});

工作URL:：
我可以提供一个解决方案，让您用一个按钮而不是两个按钮来控制菜单的显示吗

主要更改是增加
.mobile menu按钮的
z-index
，使其始终位于菜单顶部，并检查按钮的文本值并决定是否打开或关闭。您还可以检查菜单上是否有
.act
，而不是检查按钮的文本；托马托，托马托


$（文档）.ready（函数（）{
变量$mobileMenu=$（'.mobileMenu'）；
$（'.menuBtn'）。打开（'单击触摸'，函数（）{
变量$this=$（this），
isOpen='Close'==$this.text（）；
$this.text（isOpen？'Open'：'Close'）；
$mobileMenu.toggleClass（'act'，！isOpen）；
} );
} );
.mobile菜单按钮{
显示：块；
位置：固定；
顶部：20px；
左：20px；
z指数：105；
背景色：#19b698；
填充物：5px10px；
颜色：#fff；
字体系列：开放式SAN；
字体大小：粗体；
光标：指针；
}
.移动菜单按钮i{
字号：26px；
返回
$(document).ready(function(){
  $('.menuBtn').on('click touch', function () {
    $(this).toggleClass('act');
    if(!$('.mobileMenu').hasClass('act')) {
      $('.mobileMenu').addClass('act');
      //$('body').addClass('positionfixed');
    }
    else {
      $('.mobileMenu').removeClass('act');
      //$('body').removeClass('positionfixed');
    }
  });
});

$(this).toggleClass('act');

$('.menuBtn').toggleClass('act');