时间戳

首页 > 解决方案 > 导航栏行为怪异

javascript - 导航栏行为怪异

问题描述

我在 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/

标签： javascriptjqueryuinavigationbarjsfiddlevisual-web-developer

解决方案

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

.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;
}

推荐阅读