show and hide menu with jquery

Question

I would like,when clicking on the menu icon change to an X shape with animation and when clicking on X shape it change to menu icon.

I write this part.I have problem with clicking function. at first when I click on the menu button it change to X shape and show the menu but when I want to close menu my js codes does not work and I don't know why this happening. I used bootstrap in my codes I upload my site here

html

  <div class="col-xs-6">
    <a class="bazar" href="">دانلود اپلیکیشن </a>

    <button type="button" style="z-index:401" class="navbar-toggle try-op" > 
      <span style="z-index:401" class="icon-bar top-m"></span> 
      <span style="z-index:401" class="icon-bar mid-m"></span> 
      <span style="z-index:401" class="icon-bar bottom-m"></span> 
    </button>

    <div class="menu"> <!-- <span class="btnClose">×</span> -->
      <ul>
        <li><a href="index.html">صفحه اصلی</a></li>
        <li><a href="question.html">سوالات متداول</a></li>
        <li><a href="job.html">فرصت های شغلی</a></li>
        <li><a href="aboutus.html">درباره ما</a></li>
      </ul>
    </div>
  </div>

js

$('.try-op').click(function() {
        $('.navbar-toggle').removeClass('try-op');
        $('.navbar-toggle').addClass('texting');
        $('.top-m').addClass('top-animate');
        $('.mid-m').addClass('mid-animate');
        $('.bottom-m').addClass('bottom-animate');
        $('.menu').addClass('opened');
        var height = $( window ).height();
        $('.menu').css('height',height);

});

    $('.texting').click(function() {
        $('.navbar-toggle').removeClass('texting');
        $('.menu').removeClass('opened');
        $('.top-m').removeClass('top-animate');
        $('.mid-m').removeClass('mid-animate');
        $('.bottom-m').removeClass('bottom-animate');
        $('.navbar-toggle').addClass('try-op');

});

css

.icon-bar{

    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);

}
.top-animate {
    background: #fff !important;
    top: 13px !important;
   -webkit-transform: rotate(43deg);
    transform: rotate(43deg);
    transform-origin: 7% 100%;
    -webkit-transform-origin: 7% 100%;
}
.mid-animate {
    opacity: 0;
}
.bottom-animate {
    background: #fff !important;
    top: 13px !important;
    -webkit-transform: rotate(-221deg);
    transform: rotate(-221deg);
    transform-origin: 45% 18%;
    -webkit-transform-origin: 45% 18%;
     margin-top: 0px !important;
 }
.bazar-green, .bazar {
  color: #fff;
  display: block;
  font-size: 20px;
  position: absolute;
  right: 80px;
  top: 5px;
  line-height: 43px;
  background: url(image/bazarlogo.png) no-repeat left center;
  padding-left: 80px;
  z-index: 401;
}


.navbar-toggle {
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
}

.navbar-toggle{
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

.navbar-toggle .icon-bar {
 background-color: #fff;
}
.navbar-toggle .icon-bar {
 display: block;
 width: 22px;
 height: 2px;
 border-radius: 1px;
}
.menu {
width: 300px;
position: absolute;
z-index: 400;
background: rgba(0,0,0,0.7);
padding: 10px 30px;
text-align: right;
color: #fff;
font-size: 17px;
transition: all 1s;
right: -316px;
}
.btnClose {
color: #fff;
font-size: 30px;
cursor: pointer;
z-index: 500;
}

Answer 1

You are effectively adding 2 click handlers to the same element. When you click on the span elements the second handler is executed, and as the click event propagates then the first click handler is executed.

You should change the logic. Instead of using addClass/removeClass and having 2 handlers you can use just 1 click handler and toggle the classNames using toggleClass method.

$('.try-op').click(function() {
    var isOpened = $('.menu').toggleClass('opened').hasClass('opened');
    if ( isOpened ) {
      // the menu is opened 
    } else {
      // ...
    }
});

Another option that you have is using the event delegation technique. I see that you are removing the className in your first handler, probably in order to unbind the handler for the next click handling, but event handlers are bound to elements not to their classNames.

$(document).on('click', '.navbar-toggle.open', function() {
   $(this).removeClass('open').addClass('close');    
   // ...
});

$(document).on('click', '.navbar-toggle.close', function() {
   $(this).removeClass('close').addClass('open');    
  // ...
});

Answer 2

Use $('.navbar-toggle').click(function() { instead of $('.navbar-toggle span').click(function() {