Javascript 单独的导航下降必须有单独的内容，显示相同的内容

我在我的网站上的导航栏中有两个下拉导航，我希望每个下拉导航都显示自己的div，我还是JS的初学者，我能得到一些帮助吗。 谢谢

它在drop nav上显示相同的内容。下面是要检查的代码片段

var x=document.getElementById（“myDropnav”）； 函数w3_open（）{ if（x.className.indexOf（“w3显示”）=-1）{ x、 className+=“w3显示”； }否则{ x、 className=x.className.replace（“w3 show”，“w3 show”）； } } 函数w3_close（）{ x、 className=x.className.replace（“w3 show”，“w3 show”）； }

&时代；
HTML/CSS
JavaScript
绘图


&时代；
HTML/CSS
JavaScript
绘图


单击“Dropnav”按钮切换Dropnav菜单

对于您的示例，您可以按如下方式更改代码：

将菜单的标识符添加到单击事件中

...
<li><a href="javascript:void(0)" onclick="w3_close('myDropnav2');w3_open('myDropnav1');">Dropnav 1<i class="fa fa-caret-down"></i></a></li>
<li><a href="javascript:void(0)" onclick="w3_close('myDropnav1');w3_open('myDropnav2');">Dropnav 2<i class="fa fa-caret-down"></i></a></li>
...

函数w3\u打开（标识符）{
w3_close（）；
var x=document.getElementById（标识符）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
}
}
函数w3_close（）{
var elements=document.getElementsByClassName（'dropnav-identifier'）；
Array.prototype.forEach.call（元素、函数（元素、索引）{
element.className=element.className.replace（“w3 show”，”）；
});
}

&时代；
HTML/CSS
JavaScript
绘图


&时代；
HTML/CSS
JavaScript
绘图


&时代；
这里是2号导航台
JavaScript导航2
图形导航2


单击“Dropnav”按钮切换Dropnav菜单

@RasmusGlenvig:为什么要删除css包含？这样，这个例子就不起作用了。这是一个用户或这个网站上的某个人的建议，我不知道我是如何重新编辑代码的。你给我解释一下，还是给我解释一下这个方法，因为我不清楚它是如何工作的，当我们调用w3_open（）时，谢谢你方法以前编写它是为了只打开一个nav内容。我所做的是创建两个nav内容，给它们不同的ID来识别它们，现在在调用w3_open（identifier）时，我也发送标识符，通过它我可以识别按下了哪个下拉按钮，因此只能显示该nav的内容。快乐编码：）

...
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav1">
   <div class="w3-container">
      <span onclick="w3_close('myDropnav1')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span>
...
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav2">
   <div class="w3-container">
      <span onclick="w3_close('myDropnav2')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span>
...

function w3_open(id) {
   var x = document.getElementById(id);
   if (x.className.indexOf("w3-show") == -1) {
      x.className += " w3-show";
   } else {
      x.className = x.className.replace(" w3-show", "");
   }
}
function w3_close(id) {
   var x = document.getElementById(id);
   x.className = x.className.replace(" w3-show", "");
}