Question

我制作了一个自定义的侧面导航菜单，在单击汉堡菜单后滑动到位，然后在点击半透明黑色图层（随机内容下方）后滑回屏幕。

我第一次点击汉堡菜单并关闭它时工作正常，但是如果我反复执行此操作（经过6-7次非常突出），滑入时间（动画）会增加并继续增加上。

这个问题在下面的小提琴中进行了模拟。

小提琴：https://jsfiddle.net/landstrider/wnz54t28/1/

HTML

<div id="mySidenav" class="sidenav">
  <div class="slide-tabs">
   <a href="">A</a>
   <a href="">B</a>
  </div>
</div>

/***** header ******/
<div class="header">
  <div class="sidenav-burger-menu d-sm-none d-flex">
    <div class="sidenav-toggle">
      <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar bar1"></span>
       <span class="icon-bar bar2"></span>
       <span class="icon-bar bar3"></span>
    </div>
  </div>
</div>

/***** random content *****/
<div class="overflow-wrapper">
  <div class="overflow-wrapper-overlay d-none"></div>
  <div class="main-content"></div>
</div>

SCSS

/***** sidenav styles *****/

 .sidenav {
   height: 100vh;
   width: 250px;
   position: fixed;
   z-index: 3;
   top: 0;
   left: -250px;
   background-color: #111;
   overflow-x: hidden;
  }


 /***** header styles *****/

 .header {
  background-color: black;
  .sidenav-burger-menu {
   .sidenav-toggle {
    .icon-bar {
      display: block;
      position: relative;
      background: #FFFFFF;
      width: 24px;
      height: 2px;
      border-radius: 1px;
      margin: 0 auto;
      & + .icon-bar {
       margin-top: 4px;
      }
     }
    }
   }
  }

.overflow-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
 .overflow-wrapper-overlay {
   position: absolute;
   background: rgba(0, 0, 0, .7);
   height: 100%;
   width: 100%;
 }
 .main-content {
  height: 100vh;
 }
}

的Javascript（JQuery的）

/***** sidenav script *****/
var count = 0;

$('.sidenav-burger-menu').on('click', function() {
 var sidenav = $('div.sidenav');
 var overflow_wrapper = $('.overflow-wrapper');
 var overflow_wrapper_overlay = $('.overflow-wrapper .overflow-wrapper-overlay');
 if (sidenav.position().left === -250) {
  $('html, body').css({
   'overflow': 'hidden'
  });
  sidenav.animate({
   'left': 0
  }, 200);
  overflow_wrapper.animate({
   'left': 250
  }, 200);
  overflow_wrapper_overlay.removeClass('d-none');
  if (count === 0) {
   overflow_wrapper_overlay.css('z-index', '99');
   count += 1;
  }
  overflow_wrapper_overlay.on('click', function() {
   sidenav.animate({
    'left': -250
   }, 200);
  overflow_wrapper.animate({
    'left': 0
  }, 200);
  setTimeout(function() {
   overflow_wrapper_overlay.addClass('d-none');
   $('html, body').css({
     'overflow': 'unset'
   });
   }, 200);
  })
 }
});

Answer 1

我不确切地知道为什么你在编写的代码中看到了这种行为，但我怀疑它与你在每次汉堡菜单上定义多个点击处理程序有关。点击。

无论如何，这个用例只是使用CSS转换并让jQuery管理一个简单的CSS状态切换会更简单。

演示小提琴：https://jsfiddle.net/yzpxvzgy/

添加到您的newChild CSS：
```
.sidenav
```

添加新的CSS规则：

transition-property: left;
transition-duration: .2s;

使用下面的代码替换您的jQuery，只需切换sidenav上的.sidenav.display { left: 0; }类，并在单击叠加层时删除它：
```
display
```

我没有对您的var sidenav = $('div.sidenav'); $('.overflow-wrapper .overflow-wrapper-overlay').on('click', function() { sidenav.removeClass('display'); }); $('.sidenav-burger-menu').on('click', function() { sidenav.toggleClass('display'); });变体做任何事情，但可能是您可以在CSS中正确定义z-index，而不是根据菜单点击的次数来改变它

重复激活点击事件后动画延迟突然增加。继续增加

1 个答案: