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

【问题标题】：switch from mobile menu to default menu with pure css使用纯 CSS 从移动菜单切换到默认菜单
【发布时间】：2018-07-07 10:17:09
【问题描述】：

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

https://jsfiddle.net/g7tfnry1/31/

$(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 也可以正常工作。但在那之后，如果你想回到大屏幕尺寸，菜单会完全消失，因为项目仍然隐藏，或者项目没有在彼此相邻的弹性框中对齐。

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

【问题讨论】：

？您已将 #btn {display: none} 设置为屏幕 > 300。
toggle() 隐藏元素，独立于任何 CSS。这意味着您必须 .show() 让它们再次可见。使用纯 CSS 解决此问题的一种方法是拥有两个独立的菜单，一个用于移动设备，一个用于台式机，并根据窗口的宽度整体显示/隐藏它们。不过，无论如何我不会太担心这个具体问题，因为人们通常不会在浏览网站时调整窗口大小。
@ChrisG 不，他们“通常不会在浏览时调整窗口大小”，但他们可能会在纵向/横向之间翻转手机，然后就会出现问题。

标签： javascript jquery html css

【解决方案1】：

使用.toggle（显示/隐藏）时，您会覆盖CSS 规则，因为它会更改显示类型内联，它的specificity 高于外部规则，除非使用!important在 CSS 中。

改为切换类 .toggleClass，并结合额外的 CSS 规则 #items.show

更新fiddle

堆栈sn-p

$(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;
}

<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>

【讨论】：