如何解决导航需要两行时，如何显示移动菜单按钮？

我的网站在responsive togggle navigation下使用Foundation 6.5.3：台式机设备的顶部菜单和视口在大断点以下的设备的标题栏菜单。

问题

导航中有很多项目。当视口低于1287像素时，这导致使用两条线。我不希望它这样做，相反，我希望它此时切换到标题栏菜单。当网站内容发生更改时，将来发生问题的确切视口可能会更改。所以我想要的是，一旦菜单不再适合一行，菜单就会从顶部栏切换到标题栏。

我尝试过的

我已经编写了以下JavaScript代码：

responsiveNav();
function responsiveNav() {
  "use strict";
  var topBar = document.querySelector(".top-bar");
  var titleBar = document.querySelector(".title-bar");
  if (topBar.offsetHeight > 48) {
    topBar.style.display = "none";
    titleBar.style.display = "flex";
  } else {}
}
window.addEventListener('resize',responsiveNav);

它确实可以部分工作：当顶部栏高于48像素时，显示标题栏。但是菜单不是交互式的，当单击菜单图标时，没有任何反应。我需要怎么做才能激活它？

解决方法

如果我理解了您的问题，我认为您正在尝试将事件监听器添加到2个按钮的数组中（顶部栏为1，标题栏为1），因此它不起作用。可能的解决方案可以是以下解决方案（在新窗口中打开并尝试调整大小以查看两种模式均有效）

responsiveNav();
function responsiveNav() {
  var topBar = document.querySelector(".top-bar");
  var titleBar = document.querySelector(".title-bar");
  if (window.innerWidth > 480) {
    topBar.style.display = "none";
    titleBar.style.display = "flex";
  } else {
     topBar.style.display = "flex";
    titleBar.style.display = "none";
  }
}
window.addEventListener('resize',responsiveNav);

var btn1 = document.querySelectorAll('.btn1');
    
btn1[0].addEventListener('click',event => {
  console.log("btn1 clicked")
});

btn1[1].addEventListener('click',event => {
  console.log("btn1 clicked")
});

.title-bar {
  display: flex;
  
}

button {
  width: 100px;
}
span {
  width: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="title-bar">
  This is my title
  <span></span>
  <button class="btn1">Button 1</button>
  <button class="btn2">Button 2</button>
  <button class="btn3">Button 3</button>
  <button class="btn4">Button 4</button>
  </div>
<div class="top-bar">
  <button class="btn1">Button 1</button>
  <button class="btn2">Button 2</button>
  <button class="btn3">Button 3</button>
  <button class="btn4">Button 4</button>
  </div>
  
  <script>

  </script>
</body>
</html>

请注意，我仅添加了第一个按钮，但您可以轻松添加其他按钮

导航需要两行时，如何显示移动菜单按钮？

如何解决导航需要两行时，如何显示移动菜单按钮？

问题

我尝试过的

解决方法

相关推荐