单独的导航投放必须具有单独的内容，显示相同的内容

时间：2016-09-01 12:20:55

标签： javascript jquery html css

我的网站上有两个导航栏导航栏，我希望每个导航栏都显示自己的div，我还是JS的初学者，我可以得到一些帮助。 并谢谢。

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

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

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>  
<ul class="w3-navbar w3-black">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="javascript:void(0)" onclick="w3_open()">Dropnav <i class="fa fa-caret-down"></i></a></li>
<li><a href="javascript:void(0)" onclick="w3_open()">Dropnav1 <i class="fa fa-caret-down"></i></a></li>
</ul>

<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav">
  <div class="w3-container">
  <span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span>
  </div>
  <div class="w3-row-padding w3-padding-bottom">
    <div class="w3-third">
    <h3>HTML/CSS</h3>
    <a href="#">Learn </a>
    <a href="#">Learn </a>
    <a href="#">Learn </a>
    </div>
    <div class="w3-third">
    <h3>JavaScript</h3>
    <a href="#">Learn JavaScript</a>
    <a href="#">Learn jQuery</a>
    <a href="#">Learn AppML</a>
    </div>
    <div class="w3-third">
    <h3>Graphics</h3>
    <a href="#">Learn Canvas</a>
    <a href="#">Learn SVG</a>
    </div>
  </div>
  <br>
</nav>
<nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav">
  <div class="w3-container">
  <span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span>
  </div>
  <div class="w3-row-padding w3-padding-bottom">
    <div class="w3-third">
    <h3>HTML/CSS</h3>
    <a href="#">Learn HTML</a>
    <a href="#">Learn CSS</a>
    <a href="#">Learn W3.CSS</a>
    </div>
    <div class="w3-third">
    <h3>JavaScript</h3>
    <a href="#">Learn JavaScript</a>
    <a href="#">Learn jQuery</a>
    <a href="#">Learn AppML</a>
    </div>
    <div class="w3-third">
    <h3>Graphics</h3>
    <a href="#">Learn Canvas</a>
    <a href="#">Learn SVG</a>
    </div>
  </div>
  <br>
</nav>

<div class="w3-container">
  <p>Click on the "Dropnav" button to toggle the dropnav menu.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

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

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

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

将菜单的标识符更改为唯一。

...
<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", "");
}

答案 1 :(得分：0)

＆＃13;
＆＃13; 
function w3_open(identifier) {
    w3_close();
    var x = document.getElementById(identifier);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
function w3_close() {
    var elements = document.getElementsByClassName('dropnav-identifier');
  Array.prototype.forEach.call(elements, function(element, index) {
    element.className = element.className.replace(" w3-show", "");
});
}
＆＃13; 
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>  
<ul class="w3-navbar w3-black">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="javascript:void(0)" onclick="w3_open('myDropnav')">Dropnav <i class="fa fa-caret-down"></i></a></li>
<li><a href="javascript:void(0)" onclick="w3_open('myDropnav1')">Dropnav1 <i class="fa fa-caret-down"></i></a></li>
</ul>

<nav class="w3-dropnav w3-card-2 dropnav-identifier" style="display:none" id="myDropnav">
  <div class="w3-container">
  <span onclick="w3_close('dropnav')" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span>
  </div>
  <div class="w3-row-padding w3-padding-bottom">
    <div class="w3-third">
    <h3>HTML/CSS</h3>
    <a href="#">Learn </a>
    <a href="#">Learn </a>
    <a href="#">Learn </a>
    </div>
    <div class="w3-third">
    <h3>JavaScript</h3>
    <a href="#">Learn JavaScript</a>
    <a href="#">Learn jQuery</a>
    <a href="#">Learn AppML</a>
    </div>
    <div class="w3-third">
    <h3>Graphics</h3>
    <a href="#">Learn Canvas</a>
    <a href="#">Learn SVG</a>
    </div>
  </div>
  <br>
</nav>
<nav class="w3-dropnav w3-card-2 dropnav-identifier" style="display:none" id="myDropnav">
  <div class="w3-container">
  <span onclick="w3_close()" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span>
  </div>
  <div class="w3-row-padding w3-padding-bottom">
    <div class="w3-third">
    <h3>HTML/CSS</h3>
    <a href="#">Learn HTML</a>
    <a href="#">Learn CSS</a>
    <a href="#">Learn W3.CSS</a>
    </div>
    <div class="w3-third">
    <h3>JavaScript</h3>
    <a href="#">Learn JavaScript</a>
    <a href="#">Learn jQuery</a>
    <a href="#">Learn AppML</a>
    </div>
    <div class="w3-third">
    <h3>Graphics</h3>
    <a href="#">Learn Canvas</a>
    <a href="#">Learn SVG</a>
    </div>
  </div>
  <br>
</nav>
  <nav class="w3-dropnav w3-card-2" style="display:none" id="myDropnav1">
  <div class="w3-container">
  <span onclick="w3_close()" class="w3-closebtn w3-xlarge" title="Close Menu">&times;</span>
  </div>
  <div class="w3-row-padding w3-padding-bottom">
    <div class="w3-third">
    <h3>This is nav 2</h3>
    <a href="#">Learn HTML nav 2</a>
    <a href="#">Learn CSS nav 2</a>
    <a href="#">Learn W3.CSS nav 2</a>
    </div>
    <div class="w3-third">
    <h3>JavaScript nav 2</h3>
    <a href="#">Learn JavaScript nav2</a>
    <a href="#">Learn jQuery nav 2</a>
    <a href="#">Learn AppML nav 2</a>
    </div>
    <div class="w3-third">
    <h3>Graphics nav 2</h3>
    <a href="#">Learn Canvas nav 2</a>
    <a href="#">Learn SVG nav 2</a>
    </div>
  </div>
  <br>
</nav>

<div class="w3-container">
  <p>Click on the "Dropnav" button to toggle the dropnav menu.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

您可以通过在调用w3_open（）函数时发送相关数据来执行此操作。

相关问题
最新问题