Question

我想为我的所有网页设置一个导航栏/菜单。

我找到了一个针对该问题的解决方案（alla网页的一个菜单/导航栏）。有人有同样的问题，我使用了一个成员的答案，工作得很好。解决方案是制作一个嵌入javascript的代码。问题是我不知道如何在javascript中创建子菜单。我试过但没有成功。有人能告诉我如何修改javascript代码吗？如果有人可以帮助我，我会很高兴。我使用了以下代码：

的script.js

 document.getElementById("navMenu").innerHTML =
 '<ul>'+
  '<li><a href="index.html">Home</a></li>'+
  '<li><a href="services.html">Services</a></li>'+
  '<li><a href="about.html">About</a></li>'+
 '</ul>';

的index.html

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

about.html

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

Answer 1

我并非批准你正在做的事情，因为你应该在服务器上这样做。

但您只需在ul标记内添加其他li标记即可成为子菜单。 E.g：

＆＃13;

var nav = document.getElementById("navMenu");
nav.innerHTML =
  '<ul>' +
    '<li><a href="index.html">Home</a></li>' +
    '<li>' +
      '<a href="#">Services</a>' +
      '<ul>' +
        '<li><a href="simple-service.html">Simple Service</a></li>' +
        '<li><a href="regular-service.html">Regular Service</a></li>' +
        '<li><a href="hard-service.html">Hard Service</a></li>' +
      '</ul>' +
    '</li>' +
    '<li><a href="about.html">About</a></li>' +
  '</ul>';

var anchors = nav.querySelectorAll('a');

for (var i = 0; i < anchors.length; i++) {
  if (anchors[i].getAttribute('href') === '#') {
    anchors[i].nextElementSibling.style.display = 'none';
    anchors[i].addEventListener('click', function(e) {
      e.preventDefault();
      this.nextElementSibling.style.display = this.nextElementSibling.style.display.toLowerCase() === 'none' ? 'block' : 'none';
    });
  }
}

＆＃13;

<nav id="navMenu"></nav>

＆＃13;

Answer 2

您所拥有的代码将在您怀疑时动态创建HTML元素。您的问题，虽然您实际上没有描述过问题，但可能是您的js文件在DOM加载完成之前尝试访问DOM元素。在设置innerHTML之前，很容易检查是否发生这种情况是存储getElementById的结果并检查它们，所以：

var theNav = document.getElementById("navMenu");
//this will mostly likely console log as theNav being undefined
console.log("the nav element", theNav);

解决方案是在DOM完成加载后运行你的js代码，方法是在分配给window.onload的函数中运行你的代码：

window.onload = function(){
  //do code in here that requires interaction with the DOM
  //because you can guarantee that the DOM elements, like nav, are loaded
}

如何在javascript中创建子菜单？ - 修改以下代码

2 个答案: