如何在 JavaScript 中选择没有类的嵌套 UL 元素

How to select nested UL element without class in JavaScript

本文关键字：嵌套 UL 元素 JavaScript 选择      更新时间：2023-09-26

在我的Joomla模板中，我创建了一个垂直菜单，其中包括一个下拉菜单，当单击打开子菜单时，该下拉菜单应该将下面的元素"推开"。不知何故，我没有让它工作..

我试图在 LI 中获取 UL，但是如果没有 UL 的类或 ID，我如何在 JavaScript 中执行此操作。

我还没有想到这一点：

function getElements(){
var listitems = {};
for(var i = 0; i< arguments.length; i++){
    var id = arguments[i];
    var item = navigation.getElementsByTagName("li");
    if (item == null)
        throw new Error ("No list items found.");
    listitems[id] = item;
}
return listitems;
}

现在我应该得到类似的东西：（我现在下面的代码是不可能的，但它描述了我正在尝试的内容）

var nav = document.getElementById("navigation");
var nestedList = nav ul li ul;
nestedList.onclick(nav ul li ul.style = "display: block";);

HTML 如下所示：

<div id="navigation">
<ul>
<li class="parent">
    <ul><li></li></ul>
</li>
</ul>
</div>

CSS看起来像：

#navigation ul li ul{display: none;}

现在我希望它显示：单击.parent时阻止

谢谢！

由于您的页面中已经包含MooTools，因此应该可以工作（此处不是MooTools专家）：

$('#navigation li.parent').addEvent('click', function () {
  $('#navigation li.parent ul li ul').setStyle('display', 'block');
});

<小时 />旧帖子：

纯JS（这不是完整的代码，您必须多次循环元素以添加单击侦听器和应用样式）：

var listItems = document.querySelectorAll("nav ul li ul");
var count = listItems.length;
for (var i=0; i<count; i++) {
  var item = listItems.get(i);
  item.style.display = "block";
}

当然，最简单的方法是使用 jQuery 或其他库。要使用现代浏览器的纯JavaScript来做到这一点，请使用JS querySelector。否则你会花很多时间在这上面。

相关文章：