function showMenu(){
var parentElement = document.getElementById("menuItem1");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","display: block");
}
}
我只想在单击按钮时显示第一个 ul 元素。 我正在尝试更改我的网页，不再使用 :hover 来显示 ul， 并使用 javascript 显示菜单 onclick.. 我不是 js 专家，但正在学习一点，我仍然不太了解这段代码。 我试着给出我的主要 li，我的 top ul，Id。 就像 menuItem1 和 menuItem2，这使得显示 ul 成为可能，仅对于 li，这是我想要的，而不是同时打开两者。
问题是它也显示每个子菜单，我想我没有告诉它只影响第一个 ul，而不是每个 child 。 我能想到这一切背后的逻辑，但我不熟悉 javascript 命令。 first.child，或者我想某个地方需要类似的东西，谁能指导我正确的方向？
我明白了，我得到的是带Id的元素，这个函数，还有Tagname，很容易理解。剩下的，好吧，我还有很多东西要学，你我明白它在对象中循环，只是不知道为什么，或者它用它做什么..
那么，有没有什么办法，或者是什么方法，只影响第一个 ul，而不是每个子类别？
css 和 html 运行正常，但也许也有可能在不将 3 个主要 Li 更改为具有唯一 ID 的情况下执行此操作？
我的菜单看起来像这样:
<nav id="cssmenu">
<ul>
<li id="menuItem1"><a href="">menuItem1</a>
<ul>
<li><a href="">submenu1, no unique ID</a></li>
<li><a href="">submenu1, no unique ID</a></li>
</ul>
<li id="menuItem2"><a href="">menuItem2</a>
<ul>
<li><a href=''>submenu2, no uniwue ID</a></li>
<li><a href=''>submenu2, no unique ID</a>
* <ul>
<li><a href=''>submenu2-2nd column, no unique ID</li>
* </ul>
<li><a href=''>submenu2, no unique ID</a></li>
</ul>
</ul>
</nav>
我设置了一个 *，我不应该打开的 ul 所在的位置。有什么方法可以解决这个问题，而不是给每个 ul 提供唯一的 ID？ 我给了 top-li、menuItem1 等唯一 ID，这是我最想为我的菜单提供唯一 ID，因为它有点大，在很多页面上..
而且我宁愿使用 Javascript，而不是 jquery，因为我还没有学会使用 jquery..
编辑:在我的 li 的 Id 中编辑，我有这个。使用 addeventlistener 是否更容易做到这一点？以前没有用过，但是我可以设置第一次点击的 Action ，然后关闭第二次点击的菜单，对吧？在此先感谢您的帮助!:)
重新编辑: 您提供的代码运行良好，只是不再隐藏 ul。
function Meny(){
var parentElement = document.getElementById("cssmenu");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","background: red"); } }
但这确实如此，如果我改变它显示:无，它隐藏了整个东西，我真的不想要，然后我的菜单消失了.. 这是如何工作的？我肯定错过了一些重要的东西，正如你所了解的，我正在学习 javascript，并不是说我非常了解它；)
最佳答案
首先，您可以删除 javascript 中的循环并使用一个参数指向被点击的 DOM 元素(此处为 li):
function showMenu(parentElement){
var uls= parentElement.getElementsByTagName("ul");
if (uls.length > 0)
uls[0].setAttribute("style","display: block");
}
然后您可以使用 li 标签的 onclick 属性并以此为参数调用 showMenu 函数:
<nav id="cssmenu">
<ul>
<li id="menuItem1" onclick="showMenu(this)"><a href="#">menuItem1</a>
<ul>
<li><a href="#">submenu1, no unique ID</a></li>
<li><a href="#">submenu1, no unique ID</a></li>
</ul>
<li id="menuItem2" onclick="showMenu(this)"><a href="#">menuItem2</a>
<ul>
<li><a href='#'>submenu2, no uniwue ID</a></li>
<li onclick="showMenu(this)"><a href='#'>submenu2, no unique ID</a>
* <ul>
<li><a href='#'>submenu2-2nd column, no unique ID</li>
* </ul>
<li><a href='#'>submenu2, no unique ID</a></li>
</ul>
</ul>
</nav>
另一种方法是使用加载页面后调用的函数将 addeventlistener 应用于每个 li 标签，而不是使用 onclick 属性.
<body onload="load();">
具有相应的功能:
function load(){
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function(){
showMenu(this);
});
}
}
请注意，并非所有浏览器都管理 addEventListener 函数，对于 Internet Explorer，您可能必须使用 attachEvent 代替。 像 jQuery 这样的库以对开发人员透明的方式管理这些差异，因此在许多情况下使用它而不是纯 JavaScript 会更简单。
关于javascript - 如何使用 javascript 更改样式并仅影响第一个 ul？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28122180/