用jquery显示和隐藏菜单

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.

我想,当点击菜单图标变为带动画的X形状时,点击X形状时它会变为菜单图标。

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

我写这部分。我有点击功能的问题。首先,当我点击菜单按钮时,它变为X形状并显示菜单,但是当我想关闭菜单时,我的js代码不起作用,我不知道为什么会发生这种情况。我在我的代码中使用了bootstrap,我在这里上传了我的网站

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>

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

2 个解决方案

#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.

您实际上是在同一元素中添加了2个单击处理程序。当您单击span元素时,将执行第二个处理程序,并且当click事件传播时,将执行第一个单击处理程序。

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.

你应该改变逻辑。而不是使用addClass / removeClass并具有2个处理程序,您只需使用1个单击处理程序并使用toggleClass方法切换classNames。

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

您拥有的另一个选择是使用事件委派技术。我看到你正在删除第一个处理程序中的className,可能是为了取消绑定处理程序以进行下一次单击处理,但是事件处理程序绑定到不属于其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');    
  // ...
});

#2

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

使用$('。navbar-toggle')。click(function(){而不是$('。navbar-toggle span')。click(function(){

#1