Why do I have to double click to open and close my menu

Question

Why do I have to double click to open and close my menu

Hi, I have a situation that I don't understand very well. I have the following setup:

	$(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>

Run code Hide result

Why would I need to double-click the open / close button to open / close the menu?

Any idea / fix?

+3

javascript jquery html css

Rotan075 Mar 31 17 at 13:34

source to share

6 answers

May I suggest a solution where you have one button controlling the display of the menu instead of two buttons?

The main changes were to increase z-index

from .mobile-menu-button

so that it is always above your menu and checks the text value of the button and decides whether to open or close it. You can also check if there is on it .act

, instead of checking the button text; tomayto, tomahto.

$( 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>

Run code Hide result

I also added list-style: none;

in .mobileMenu ul

as I noticed some points. I assume you didn't want that.

Why two clicks?

As far as you need to double-click, you used toggleClass()

on two different buttons to open / close the menu. The first button (Open) will add .act

and display the menu. Now we see a second button (Close), which doesn't have it yet .act

, so you click on it and toggleClass()

add .act

to it (instead of removing .act

from the first button (Open) as you might expect). Since it requires a button .act

to hide this menu, you need to click the second button (Close) again to toggelClass()

remove .act

and hide the menu. The first button (Open) is now displayed, which still has .act

. But clicking on it removes .act

, so it takes another click to add.act

back to the button and now the menu can be shown because the button has .act

.

It's easier to use one button.

+2

hungerstar Mar 31 17 at 13:46

source to share

You should use jQuery

below code instead of using yours ::

$(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');
    }
  });
});

Working url :: https://jsfiddle.net/Lxz9v34L/2/

+1

Rana Ghosh Mar 31 17 at 13:45

source to share

You have 2 .menuBtn

. You can simplify your code something like this:

$(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>

Run code Hide result

+1

Ronan Mar 31 17 at 13:46

source to share

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

to

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

because this will return the only span to be pressed not the other. Hence it won't switch class on both divs.

find a working snapshot below

$(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>

Run code Hide result

+1

Dhiraj Mar 31 17 at 13:51

source to share

There are actually two buttons (1 for open, 1 for close).

The first click on "open" works, but then it is not because the close button has no action class.

I think you need to switch the class to both:

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

Run code Hide result

+1

Cyril Mar 31 17 at 13:52

source to share

Halcyon · Accepted Answer · 2017-03-31T13:41:09+0000

The problem is you are checking .act

on a button instead of a menu. There are two buttons, so you need to switch twice.

Change:

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

to

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

fixes this:

	$(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>

Run code Hide result

Why do I have to double click to open and close my menu

Why two clicks?

More articles: