Question

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项目，点击按钮时。我正在尝试更改我的网页使用：悬停显示ul，并使用javascript显示菜单onclick .. 我不是js专家，但我学到了一点，我仍然不太了解这段代码。我试着给我的主要成员，我的顶级名单，Id。就像menuItem1和menuItem2一样，这样就可以显示ul，只有那个，这就是我想要的，而不是打开它们。

问题在于，每个菜单下都会显示，我想我很想告诉它只影响第一个ul，而不是每个孩子。我可以想到它背后的逻辑，但我不熟悉javascript命令。 first.child，或类似的东西，我想在某个地方需要，任何人都能引导我朝着正确的方向前进吗？

据我所知，我得到了带有Id的元素，这个函数和标记名很容易理解。剩下的，我还有很多东西需要学习，你了解它通过物体循环，只是不知道为什么，或者用它做什么..

那么，是否有某种方式，或者，方式是什么，只影响第一个ul，而不是每个子分类？

css和html运行正常，但也许有可能这样做而不改变3个主要的李有独特的身份？

我的菜单看起来像这样：

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

编辑：在我的身份编辑中编辑，我有这个...是否更容易使用addeventlistener执行此操作？之前没有使用它，但是我可以设置第一次点击的动作，然后关闭第二次点击的菜单，对吗？在此先感谢您的帮助！:)

RE-编辑：你提供的代码工作正常，只是没有再隐藏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"); } }

但是这样做了，如果我改变了它就会显示：none，它隐藏了整个东西，我真的不想要，然后我的菜单消失了...... 这是怎么回事？我一定肯定错过了这里必不可少的东西，而且你知道我正在学习javascript，而不是说我很清楚;）

Answer 1

Get immediate first child element

找到答案，只需将我的[i]改为[0] .. 在＃中真的很痛苦，有时会问正确的问题：D

这显然会阻止我的数组循环或其他东西，并且只针对我想要的东西。现在尝试让它与每个子菜单一起使用，无需使用唯一的ID就可以了。我想这是...

Answer 2

首先，您可以删除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更改样式并仅影响第一个ul？

2 个答案: