Hov 我用 javascript 改变风格，只影响第一个 ul

Hov do I change style with javascript and affect only first ul?

本文关键字：影响 第一个 ul 风格 我用 javascript 改变 Hov      更新时间：2023-09-26
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在单击时显示菜单。我不是js专家，但正在学习一些，我仍然不太理解这段代码。我试着给我的主要 li，我的顶级 ul，Id。就像menuItem1和menuItem2一样，这使得显示ul's成为可能，只有那个li，这是我想要的，而不是同时打开两者。

问题是，它

显示了每个菜单下，我想我错过了告诉它只影响第一个ul，而不是每个孩子。我可以想到这一切背后的逻辑，但我不熟悉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's，menuItem1等，唯一的ID，这是我想为我的菜单提供唯一ID的最多，因为它在很多页面上都有点大。

我宁愿使用Javascript，而不是jquery，因为我还没有学会jquery的使用。

编辑：在我的 li 的 id 中编辑，我有这个..也许使用 addeventlistener 更容易做到这一点吗？以前没有使用过它，但是我可以在那里设置第一次单击的操作，然后关闭菜单进行第二次单击，对吗？提前感谢您的任何帮助！:)

重新编辑：您提供的代码工作正常，只是不再隐藏 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可能会更简单。

获取第一个子元素

找到答案，只需将我的 [i] 更改为 [0]。有时问正确的问题真的很痛苦:D

这显然会阻止我的数组循环或其他东西，并且只针对我想要的内容。现在尝试让它与每个子菜单一起工作，消除对唯一 ID 的需求是我想要走的路。

相关文章：