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

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

javascript

如何在javascript中创建子菜单？-修改以下代码,javascript,Javascript,我想为我的所有网页提供一个导航栏/菜单我为这个问题找到了一个解决方案，一个用于alla网页的菜单/导航栏。有人和她有同样的问题，我使用了一位成员的答案，效果很好。解决方案是制作一个嵌入javascript的代码。问题是我不知道如何用javascript创建子菜单。我试过了，但没有成功。有人能告诉我如何修改javascript代码吗？如果有人能帮助我，我将非常高兴。我使用了以下代码： script.js index.html 关于.html 我真的不赞成你这样做，因为你应该在服务器上这样做但是

我想为我的所有网页提供一个导航栏/菜单

我为这个问题找到了一个解决方案，一个用于alla网页的菜单/导航栏。有人和她有同样的问题，我使用了一位成员的答案，效果很好。解决方案是制作一个嵌入javascript的代码。问题是我不知道如何用javascript创建子菜单。我试过了，但没有成功。有人能告诉我如何修改javascript代码吗？如果有人能帮助我，我将非常高兴。我使用了以下代码：

script.js

index.html

关于.html

我真的不赞成你这样做，因为你应该在服务器上这样做

但是，您可以简单地将其他ul标签添加到您希望成为子菜单的li标签中。例如：

var nav=document.getElementByIdnavMenu； nav.innerHTML= + + + + + + + + + + + ; var anchors=nav.queryselectoral'a'；对于var i=0；i.长度；i++{ 如果锚定[i].getAttribute'href'=={ 锚[i].nextElementSibling.style.display='none'； anchors[i]。addEventListener'click'，函数E{ e、防止违约； this.nextElementSibling.style.display=this.nextElementSibling.style.display.toLowerCase=='none'？'block'：'none'； }; } }

您拥有的代码将根据您的怀疑动态创建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
}

您不应该在JS中构建菜单。你应该尽量保持你的网站的可访问性和对称性。使用HTMLB构建菜单，但我不想在更改导航栏/菜单时更改“数百”页！我想为网站上的所有页面提供一个菜单。导航栏上的一次修改应该会改变我所有的页面。你有更好的解决方案吗？我在这个页面上找到了我使用的解决方案：这就是我使用js代码的原因。谢谢Buzinas，我会试试看它是否有效。但是，为什么在浏览器中使用js执行菜单的代码而不是在服务器上执行您喜欢的代码是一个糟糕的解决方案呢？如果你想让所有页面都有一个导航栏，你会怎么做？@问题最好的方法是使用一些服务器技术，例如PHP、ASP.NET、Ruby on Rails、Python等。但是如果你出于某种原因不想/不能这样做，你至少可以使用常规HTML，并以你现在的方式加载视图，但是通过。请看一看。如果我理解正确，那么服务器技术与代码的区别是什么？在本例中，菜单是在服务器上执行的，而不是在浏览器中执行的，这是我当前使用的解决方案吗？为什么这是一个糟糕的解决方案？不是我不想做，而是我不知道怎么做。我还想要一个简单而不复杂的解决方案。还有一个关于普朗克的问题，是你为我创造的。这个解决方案和我现在使用的第一个js代码有什么区别？对不起，我缺乏知识。谢谢不同之处在于服务器可以使用include或masterpage等单独处理部分。其他好处是您可以缓存这些部分，并且渲染速度更快。主要的好处是SEO，因为当您在客户端呈现内容时，搜索爬虫不会正确理解。另一个好处是，您可以为访问者创建友好的URL，例如/about而不是/about.html等。现在，谈论plunker版本而不是您的版本，唯一的原因是可维护性，因为维护字符串插值代码太难了。你的HTML越复杂，维护起来就越困难。@问题，如果我的答案对你有用，请单击V将其标记为已接受，然后单击箭头向上投票。谢谢很抱歉，我无法解释。我对这一点还不太了解。我真的不知道DOM是什么。我不知道你说的“窗口加载”是什么意思对不起，你能给新手解释一下吗？我的问题是我不知道如何在js中创建子菜单。我正处于学习曲线上

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

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

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
}