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

时间：2017-03-31 13:34:28

标签： javascript jquery html css

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

＆＃13;
＆＃13; 
	$(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');
			}
	});
  	});
＆＃13; 
	.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;
	}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

为什么我要在打开/关闭按钮上按两次以打开/关闭菜单？

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

6 个答案:

答案 0 :(得分：6)

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

更改：

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

到

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

修复它：

＆＃13;
＆＃13; 
	$(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');
			}
	});
  	});
＆＃13; 
	.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;
	}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

我可以提供一个解决方案，您只需一个按钮来控制菜单的显示而不是两个按钮吗？

主要更改是增加z-index的{​​{1}}，因此它始终位于菜单的顶部，并检查按钮的文本值并决定是打开还是关闭它。您还可以检查菜单上是否有.mobile-menu-button，而不是检查按钮的文本; tomayto，tomahto。

.act
$( 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()并显示菜单。现在我们看到第二个按钮（关闭）还没有.act，所以你点击它然后.act将toggleClass()添加到它（而不是删除.act从您可能期待的第一个按钮（打开）开始。由于按钮上需要.act才能隐藏菜单，因此您现在需要再次单击第二个按钮（关闭），以便.act删除toggelClass()并隐藏菜单。现在显示第一个按钮（打开），它仍然有.act。但是点击它会删除.act，因此需要再次点击将.act添加回按钮，现在可以显示菜单，因为该按钮有.act。

使用单个按钮更简单。

答案 2 :(得分：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/

答案 3 :(得分：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>

答案 4 :(得分：1)

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

到

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

因为这将返回唯一被点击而不是其他的跨度。因此，它不会在两个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>

答案 5 :(得分：1)

实际上，有两个按钮（1表示打开，1表示关闭）。

首先点击＆＃34;打开＆＃34;但是，它并不起作用，因为关闭按钮没有act类。

我认为你应该在两个方面切换课程：

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

相关问题
最新问题