Question

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

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

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

你应该改变逻辑。您可以只使用1个点击处理程序，并使用addClass方法切换classNames，而不是使用removeClass / toggleClass并拥有2个处理程序。

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

您拥有的另一个选择是使用事件委派技术。我看到你正在删除第一个处理程序中的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');    
  // ...
});

Answer 2

使用$('.navbar-toggle').click(function() {代替$('.navbar-toggle span').click(function() {

使用jquery显示和隐藏菜单

2 个答案: