Question

当前，我正在尝试创建一个导航栏，如果屏幕尺寸太小（响应式/移动式），则会切换到汉堡菜单。

$(document).ready(() => {
  $("#btn").click(() => {
    $("#items").toggle();
  });
});

#navbar {
  background: red;
}

#items {
  display: flex;
}

#btn {
  display: none;
}

@media(max-width: 300px) {
  #items {
    display: none;
  }
  #btn {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <button id="btn">X</button>
  <div id="items">
    <div>
      <a>
        Link 1
      </a>
    </div>
    <div>
      <a>
        Link 2
      </a>
    </div>
    <div>
      <a>
        Link 3
      </a>
    </div>
  </div>
</div>

因此，如果您减小屏幕尺寸以移动，则CSS可以正常工作。如果您通过单击按钮显示项目，则CSS也可以正常工作。但是之后，如果您想返回大屏幕，则菜单会完全消失，因为项目仍处于隐藏状态，或者项目在彼此相邻的flex框中没有对齐。

我的问题是，我必须创建一个调整大小的事件$(window).resize()还是在CSS中丢失某些内容？

Answer 1

使用.toggle（显示/隐藏）时，您会覆盖CSS规则，因为它会更改显示类型 inline ，该显示类型的specificity高于外部规则，除非{ {1}}用于CSS。

相反，切换类!important并结合额外的CSS规则.toggleClass

更新了fiddle

堆栈片段

#items.show

$(document).ready(() => {
  $("#btn").click(() => {
    $("#items").toggleClass('show');
  });
});

#navbar {
  background: red;
}

#items {
  display: flex;
}

#btn {
  display: none;
}

/*  temp. changed to 500 so it works better in the snippet/Chrome when resize  */
@media(max-width: 500px) { 
  #items {
    display: none;
  }
  #btn {
    display: block;
  }
}

#items.show {
  display: flex;
}

使用纯CSS从移动菜单切换到默认菜单

1 个答案: