0

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

谢谢！

4

2 回答 2

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";
}
于 2013-09-27T19:40:13.613 回答
0

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

于 2013-09-27T19:39:19.300 回答