Question

我在JsFiddle设计的导航栏表现得很奇怪。有时汉堡包菜单根本不起作用，有时它会打开和关闭菜单5次以上。任何帮助是极大的赞赏。

当我摆脱窗口宽度功能时它工作正常，但我不希望它在768像素以上时表现相同，因为大屏幕尺寸不再需要汉堡菜单。

我认为这与此有关：

$(function(){
    var w = $(window).width();
$(window).resize(function() {
    if(w <= 768){
        $('.mobile-toggle').click(function(){
        $('nav').slideToggle(500);
        this.classList.toggle('change');
 });

  $('.m-link').click(function(){
      $('.m-link').removeClass('active');
      $(this).addClass('active');
      $('nav').slideToggle(500);
      $('.mobile-toggle').removeClass('change')
  });
 }else{
      $('nav').show();
 }
});
});

https://jsfiddle.net/ChrisFred96/zg4nprfm/56/

Answer 1

似乎与分辨率及其变化有关。我的理解是，如果你改变分辨率，它就不固定了。

＆＃13;

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 6px);
  transform: rotate(-45deg) translate(-8px, 6px);
  background-color: red;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-7.5px, -7px);
  transform: rotate(45deg) translate(-7.5px, -7px);
  background-color: red;
}

＆＃13;

导航栏表现奇怪

1 个答案: