показать и скрыть меню с jquery

Question

Я бы хотел, чтобы при щелчке по значку меню изменилась форма X с анимацией, и при нажатии на X-форму она изменилась на значок меню.

Я пишу эту деталь. У меня проблема с функцией щелчка. сначала, когда я нажимаю кнопку меню, она меняет форму X и показывает меню, но когда я хочу закрыть меню, мои коды js не работают, и я не знаю, почему это происходит. я самозагрузки в моих кодов я загрузить мой сайт 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

Вы эффективно добавляете два обработчика кликов к одному элементу. Когда вы нажимаете на элементы span, выполняется второй обработчик, и по мере распространения события click выполняется первый обработчик click.

Вы должны изменить логику. Вместо того, чтобы использовать addClass/removeClass и имея 2 обработчика, вы можете использовать только обработчик 1 щелчка и переключать имена классов, используя метод toggleClass.

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

Другой вариант, который у вас есть, заключается в использовании технологии делегирования событий. Я вижу, что вы удаляете className в своем первом обработчике, возможно, чтобы отвязать обработчик для последующей обработки кликов, но обработчики событий привязаны к элементам не к их именам классов.

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

$('.navbar-toggle').click(function() { Используйте вместо $('.navbar-toggle span').click(function() {