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

Question

在我的Joomla模板中，我创建了一个垂直菜单，其中包括一个下拉菜单，当打开子菜单onclick时，该菜单应“推”下面的元素。 我不知何故不起作用。

我试图在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时阻止

谢谢！

Answer 1

由于您的页面中已经包含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"; } 

Answer 2

当然，最简单的方法是使用jQuery或其他一些库。 要针对现代浏览器使用纯JavaScript做到这一点，请使用JS querySelector 。 否则，您将在此花费很多时间。