Javascript 当导航需要两行时，如何显示移动菜单按钮？ 480）{ topBar.style.display=“无”； titleBar.style.display=“flex”； }否则{ topBar.style.display=“flex”； titleBar.style.display=“无”； } } window.addEventListener（'resize'，responsiveNav）； var btn1=document.querySelectorAll（'.btn1'）； btn1[0]。addEventListener（'click'，事件=>{ console.log（“点击btn1”） }); btn1[1]。addEventListener（'单击'，事件=>{ console.log（“点击btn1”） }); 。标题栏{ 显示器：flex； } 钮扣{ 宽度：100px； } 跨度{ 宽度：20px； } JS-Bin 这是我的头衔 按钮1 按钮2 按钮3 按钮4 按钮1 按钮2 按钮3 按钮4

我在导航栏中有很多项。这导致在视口低于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（）；
函数响应NAV（）{
var topBar=document.querySelector（“.top bar”）；
var titleBar=document.querySelector（“标题栏”）；
如果（window.innerWidth>480）{
topBar.style.display=“无”；
titleBar.style.display=“flex”；
}否则{
topBar.style.display=“flex”；
titleBar.style.display=“无”；
}
}
window.addEventListener（'resize'，responsiveNav）；
var btn1=document.querySelectorAll（'.btn1'）；
btn1[0]。addEventListener（'click'，事件=>{
console.log（“点击btn1”）
});
btn1[1]。addEventListener（'单击'，事件=>{
console.log（“点击btn1”）
});
。标题栏{
显示器：flex；
}
钮扣{
宽度：100px；
}
跨度{
宽度：20px；
}

JS-Bin
这是我的头衔
按钮1
按钮2
按钮3
按钮4
按钮1
按钮2
按钮3
按钮4
如果我理解您的问题，我认为您正在尝试将事件侦听器添加到由2个按钮组成的数组中（1个用于顶部栏，1个用于标题栏），因此它不起作用。
可能的解决方案如下（在新窗口上打开并尝试调整大小，以查看两种模式都工作）


responsiveNav（）；
函数响应NAV（）{
var topBar=document.querySelector（“.top bar”）；
var titleBar=document.querySelector（“标题栏”）；
如果（window.innerWidth>480）{
topBar.style.display=“无”；
titleBar.style.display=“flex”；
}否则{
topBar.style.display=“flex”；
titleBar.style.display=“无”；
}
}
window.addEventListener（'resize'，responsiveNav）；
var btn1=document.querySelectorAll（'.btn1'）；
btn1[0]。addEventListener（'click'，事件=>{
console.log（“点击btn1”）
});
btn1[1]。addEventListener（'单击'，事件=>{
console.log（“点击btn1”）
});
。标题栏{
显示器：flex；
}
钮扣{
宽度：100px；
}
跨度{
宽度：20px；
}

JS-Bin
这是我的头衔
按钮1
按钮2
按钮3
按钮4
按钮1
按钮2
按钮3
按钮4
不，对不起，也许我的问题不够清楚。我说的是基金会的特点。在正常配置中，有一个固定视口，其中显示移动导航（“标题栏”）而不是桌面导航（“顶栏”）。我希望这个切换点是动态的：只要“.top bar”的内容不再适合屏幕，就显示移动导航。我的代码确实显示了它，但是导航不起作用，我猜是因为基金会仍然认为其他导航是活动的。不，抱歉，也许我的问题还不够清楚。我说的是基金会的特点。在正常配置中，有一个固定视口，其中显示移动导航（“标题栏”）而不是桌面导航（“顶栏”）。我希望这个切换点是动态的：只要“.top bar”的内容不再适合屏幕，就显示移动导航。我的代码确实显示了它，但是导航不起作用，我猜是因为基金会仍然认为其他导航是活动的。