logo标签列表

为什么我要点击两次才能打开和关闭我的菜单

javascriptjqueryhtmlcss
3

你好，我遇到了一个不太明白的情况。我的设置如下：

 $(document).ready(function(){
  $('.menuBtn').on('click touch', function () {
  $(this).toggleClass('act');
   if($(this).hasClass('act')) {
    $('.mobileMenu').addClass('act');
    //$('body').addClass('positionfixed');
   }
   else {
    $('.mobileMenu').removeClass('act');
    //$('body').removeClass('positionfixed');
   }
 });
   });
 .mobile-menu-button{
  display:block;
  position:fixed;
  top:20px;
  left:20px;  
  z-index:99;
    background-color:#19b698;
    padding:5px 10px;
    color:#fff;
    font-family: Open Sans;
    font-weight:bold;
 }
 .mobile-menu-button i{
  font-size:26px;
  background-color:#00adee;
  padding:5px 10px;
  color:#fff;
 }
.mobileMenu {
  background-color: #fff !important;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;   
  height: 100vh;
  width: 100vw;
  display: block;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
     transform: scale(0);
  overflow:hidden;
 }
 .mobileMenu img{
  max-width:90%;
  margin:0 auto;
  margin-top:20px;
  margin-bottom:10px;
  border-bottom:1px dotted #717274;
  padding-bottom:20px;
 }
 .mobileMenu.act {
  opacity: 1;
  -webkit-transform: scale(1);
     transform: scale(1);
 }
 .mobileMenu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
     transform: translateX(0);
  display:block !important;
 }
 .mobileMenu ul {
  display: block;
  vertical-align: middle;
 }
 .mobileMenu li {
  padding: 10px 0 !important;
  -webkit-transition: all 400ms 510ms;
  transition: all 400ms 510ms;
  opacity: 0;
 }
 .mobileMenu li:nth-child(odd) {
   -webkit-transform: translateX(30%);
     transform: translateX(30%);
 }
 .mobileMenu li:nth-child(even) {
   -webkit-transform: translateX(-30%);
     transform: translateX(-30%);
 }
 .mobileMenu li:last-child {
   -webkit-transform: none;
     transform: none;
 }
 .mobileMenu a {
   color: #00adee !important;
   display: inline-block;
   font-size: 18px;
 }
 .mobileMenu a.suBtn {
   color: #fff;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
  <nav class="mobileMenu">
  <span class="mobile-menu-button menuBtn">Close</span>      
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

为什么我需要按两次开/关按钮才能打开/关闭菜单？

有人有任何想法/修复方法吗？

你尝试过添加evt.preventDefault();吗？也许这就是问题所在？ - user218046
1
你可以使用.add而不是检查类是否具有值，然后在其他地方应用它：$(this).add('.mobileMenu').toggleClass('act'); - freedomn-m
6个回答
6
问题在于你在按钮上检查了.act，而不是菜单。由于有两个按钮，因此需要切换两次。 更改为： 
$(this).toggleClass('act');
if($(this).hasClass('act')) {

to

$('.mobileMenu').toggleClass('act');
if($('.mobileMenu').hasClass('act')) {
修复它： 

 $(document).ready(function(){
  $('.menuBtn').on('click touch', function () {
  $('.mobileMenu').toggleClass('act');
   if($('.mobileMenu').hasClass('act')) {
    $('.mobileMenu').addClass('act');
    //$('body').addClass('positionfixed');
   }
   else {
    $('.mobileMenu').removeClass('act');
    //$('body').removeClass('positionfixed');
   }
 });
   });
 .mobile-menu-button{
  display:block;
  position:fixed;
  top:20px;
  left:20px;  
  z-index:99;
    background-color:#19b698;
    padding:5px 10px;
    color:#fff;
    font-family: Open Sans;
    font-weight:bold;
 }
 .mobile-menu-button i{
  font-size:26px;
  background-color:#00adee;
  padding:5px 10px;
  color:#fff;
 }
.mobileMenu {
  background-color: #fff !important;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;   
  height: 100vh;
  width: 100vw;
  display: block;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
     transform: scale(0);
  overflow:hidden;
 }
 .mobileMenu img{
  max-width:90%;
  margin:0 auto;
  margin-top:20px;
  margin-bottom:10px;
  border-bottom:1px dotted #717274;
  padding-bottom:20px;
 }
 .mobileMenu.act {
  opacity: 1;
  -webkit-transform: scale(1);
     transform: scale(1);
 }
 .mobileMenu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
     transform: translateX(0);
  display:block !important;
 }
 .mobileMenu ul {
  display: block;
  vertical-align: middle;
 }
 .mobileMenu li {
  padding: 10px 0 !important;
  -webkit-transition: all 400ms 510ms;
  transition: all 400ms 510ms;
  opacity: 0;
 }
 .mobileMenu li:nth-child(odd) {
   -webkit-transform: translateX(30%);
     transform: translateX(30%);
 }
 .mobileMenu li:nth-child(even) {
   -webkit-transform: translateX(-30%);
     transform: translateX(-30%);
 }
 .mobileMenu li:last-child {
   -webkit-transform: none;
     transform: none;
 }
 .mobileMenu a {
   color: #00adee !important;
   display: inline-block;
   font-size: 18px;
 }
 .mobileMenu a.suBtn {
   color: #fff;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
  <nav class="mobileMenu">
  <span class="mobile-menu-button menuBtn">Close</span>      
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

2
我能为您提供一种解决方案，即使用一个按钮来控制菜单的显示，而不是两个按钮？ 主要更改是增加了.mobile-menu-button的z-index，使其始终在菜单的顶部，并检查按钮的文本值以决定是否打开或关闭它。您还可以检查菜单是否具有.act，而不是检查按钮的文本；这只是不同的说法。请注意保留HTML标签。 

$( document ).ready( function () {
  
  var $mobileMenu = $( '.mobileMenu' );

  $('.menuBtn').on( 'click touch', function () {
  
    var $this = $( this ),
        isOpen = 'Close' === $this.text();
        
    $this.text( isOpen ? 'Open' : 'Close' );
    $mobileMenu.toggleClass( 'act', !isOpen );
    
  } );
  
} );
.mobile-menu-button {
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 105;
  background-color: #19b698;
  padding: 5px 10px;
  color: #fff;
  font-family: Open Sans;
  font-weight: bold;
  cursor: pointer;
}

.mobile-menu-button i {
  font-size: 26px;
  background-color: #00adee;
  padding: 5px 10px;
  color: #fff;
}

.mobileMenu {
  background-color: #fff !important;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100vh;
  width: 100vw;
  display: block;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
  transform: scale(0);
  overflow: hidden;
}

.mobileMenu img {
  max-width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 1px dotted #717274;
  padding-bottom: 20px;
}

.mobileMenu.act {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.mobileMenu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  display: block !important;
}

.mobileMenu ul {
  display: block;
  list-style: none;
}

.mobileMenu li {
  padding: 10px 0 !important;
  -webkit-transition: all 400ms 510ms;
  transition: all 400ms 510ms;
  opacity: 0;
}

.mobileMenu li:nth-child(odd) {
  -webkit-transform: translateX(30%);
  transform: translateX(30%);
}

.mobileMenu li:nth-child(even) {
  -webkit-transform: translateX(-30%);
  transform: translateX(-30%);
}

.mobileMenu li:last-child {
  -webkit-transform: none;
  transform: none;
}

.mobileMenu a {
  color: #00adee !important;
  display: inline-block;
  font-size: 18px;
}

.mobileMenu a.suBtn {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
<nav class="mobileMenu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

我还添加了list-style: none;到.mobileMenu ul，因为我发现有一些项目符号。我猜你不想要那些。

为什么需要点击两次？

至于为什么需要点击两次，是因为您在使用toggleClass() 打开/关闭菜单的两个不同按钮上。第一个按钮（Open）将添加.act并显示菜单。 现在我们看到第二个按钮（Close），它尚未有.act ，所以您单击它， toggleClass()会将.act添加到它（而不是从第一个按钮（Open）删除.act，这可能是您期望的）。由于必须在按钮上使用.act才能隐藏菜单，因此您现在需要再次单击第二个按钮（Close），以便 toggleClass()可以删除.act并隐藏菜单。现在第一个按钮（Open）被显示出来，它仍然具有.act。但是，单击它会删除.act，从而需要再次单击以将.act添加回按钮，现在菜单可以显示，因为按钮具有.act。

使用一个单一的按钮更简单。

感谢您清晰的解释。我认为这个解释也会帮助其他遇到类似问题的人。谢谢！ - Rotan075
1

您应该使用以下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');
    }
  });
});

工作链接：https://jsfiddle.net/Lxz9v34L/2/

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

到

$('.menuBtn').toggleClass('act');
因为这将返回唯一被点击的span，而不是其他的span。因此它不会在两个div上切换类。 请在下面找到可工作的片段。 

$(document).ready(function(){
  $('.menuBtn').on('click touch', function () {
   $('.menuBtn').toggleClass('act');
   if($(this).hasClass('act')) {
    $('.mobileMenu').addClass('act');
    //$('body').addClass('positionfixed');
   }
   else {
    $('.mobileMenu').removeClass('act');
    //$('body').removeClass('positionfixed');
   }
 });
   });
.mobile-menu-button{
  display:block;
  position:fixed;
  top:20px;
  left:20px;  
  z-index:99;
    background-color:#19b698;
    padding:5px 10px;
    color:#fff;
    font-family: Open Sans;
    font-weight:bold;
 }
 .mobile-menu-button i{
  font-size:26px;
  background-color:#00adee;
  padding:5px 10px;
  color:#fff;
 }
.mobileMenu {
  background-color: #fff !important;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;   
  height: 100vh;
  width: 100vw;
  display: block;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
     transform: scale(0);
  overflow:hidden;
 }
 .mobileMenu img{
  max-width:90%;
  margin:0 auto;
  margin-top:20px;
  margin-bottom:10px;
  border-bottom:1px dotted #717274;
  padding-bottom:20px;
 }
 .mobileMenu.act {
  opacity: 1;
  -webkit-transform: scale(1);
     transform: scale(1);
 }
 .mobileMenu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
     transform: translateX(0);
  display:block !important;
 }
 .mobileMenu ul {
  display: block;
  vertical-align: middle;
 }
 .mobileMenu li {
  padding: 10px 0 !important;
  -webkit-transition: all 400ms 510ms;
  transition: all 400ms 510ms;
  opacity: 0;
 }
 .mobileMenu li:nth-child(odd) {
   -webkit-transform: translateX(30%);
     transform: translateX(30%);
 }
 .mobileMenu li:nth-child(even) {
   -webkit-transform: translateX(-30%);
     transform: translateX(-30%);
 }
 .mobileMenu li:last-child {
   -webkit-transform: none;
     transform: none;
 }
 .mobileMenu a {
   color: #00adee !important;
   display: inline-block;
   font-size: 18px;
 }
 .mobileMenu a.suBtn {
   color: #fff;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
  <nav class="mobileMenu">
  <span class="mobile-menu-button menuBtn">Close</span>      
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

1
你有2个.menuBtn。你可以简化你的代码，像这样： 

$(document).ready(function(){
  $('.menuBtn').on('click touch', function () {
    $('.mobileMenu').toggleClass('act');
    $(this).text($(this).text() === 'Open' ? 'Close' : 'Open')
 });
});
.mobile-menu-button{
  display:block;
  position:fixed;
  top:20px;
  left:20px;  
  z-index:101;
    background-color:#19b698;
    padding:5px 10px;
    color:#fff;
    font-family: Open Sans;
    font-weight:bold;
    cursor: pointer;
 }
 .mobile-menu-button i{
  font-size:26px;
  background-color:#00adee;
  padding:5px 10px;
  color:#fff;
 }
.mobileMenu {
  background-color: #fff !important;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;   
  height: 100vh;
  width: 100vw;
  display: block;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
     transform: scale(0);
  overflow:hidden;
 }
 .mobileMenu img{
  max-width:90%;
  margin:0 auto;
  margin-top:20px;
  margin-bottom:10px;
  border-bottom:1px dotted #717274;
  padding-bottom:20px;
 }
 .mobileMenu.act {
  opacity: 1;
  -webkit-transform: scale(1);
     transform: scale(1);
 }
 .mobileMenu.act ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
     transform: translateX(0);
  display:block !important;
 }
 .mobileMenu ul {
  display: block;
  vertical-align: middle;
 }
 .mobileMenu li {
  padding: 10px 0 !important;
  -webkit-transition: all 400ms 510ms;
  transition: all 400ms 510ms;
  opacity: 0;
 }
 .mobileMenu li:nth-child(odd) {
   -webkit-transform: translateX(30%);
     transform: translateX(30%);
 }
 .mobileMenu li:nth-child(even) {
   -webkit-transform: translateX(-30%);
     transform: translateX(-30%);
 }
 .mobileMenu li:last-child {
   -webkit-transform: none;
     transform: none;
 }
 .mobileMenu a {
   color: #00adee !important;
   display: inline-block;
   font-size: 18px;
 }
 .mobileMenu a.suBtn {
   color: #fff;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="mobile-menu-button menuBtn">Open</span>
  <nav class="mobileMenu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

1
事实上，有两个按钮（一个是打开，一个是关闭）。 第一个单击“打开”按钮有效，但然后它失效了，因为关闭按钮没有act类。 我认为您应该在两个按钮上都切换类： 

$('.menuBtn').on('click touch', function () {
  **$('.menuBtn')**.toggleClass('act');
    ...
    }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，