Question

在我的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

时阻止

谢谢！

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。否则你将花费很多的时间。

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

2 个答案: