Question

我使用无序列表创建了一个垂直菜单。在列表中，有一些子项在点击事件之前不会显示。如何获取对li元素的第一个ul子元素的引用，以将其显示样式从“none”更改为“”？

当我点击mnu03时，如何获得对mnu031的引用。现在我只是在父ID中添加一个“1”来创建孩子的id，这是kludgy。

我不想使用jQuery。

标记如下：

<pre>
<ul>
    <li><a href="#" id="mnu01" onclick="this">Item 1</a></li>
    <li><a href="#" id="mnu02" onclick="this">Item 2</a></li>
    <li><a href="#" id="mnu03" onclick="this">Item 3</a>
         <ul id="mnu031" style="display:none;" >
             <li><a href="#" id="mnuSub031" onclick="this">Item S1</a></li>
             <li><a href="#" id="mnuSub032" onclick="this">Item S2</a></li>
         </ul>
    </li>
    <li><a href="#" id="mnu04" onclick="this">Item 4</a></li>
    <li><a href="#" id="mnu05" onclick="this">Item 5</a></li>
</ul>
</pre>

Answer 1

在绑定到点击的JavaScript代码中：

this.parentElement.querySelector('ul').style.display = 'block';

http://jsfiddle.net/CDXH5/

顺便说一下，你的html中有一些不匹配的引号。

Answer 2

为你的li元素分配一个类。

    window.onload=function() {
var obj=document.getElementsByClassName('x');
for(var i=0;i<obj.length;i++)
{

obj[i].addEventListener("click", function() {
 for(var i=0;i< this.childElementCount ;i++ )
    {
        // write ur code here  this.children[i] is your reference
    }

 });

}   

}

Answer 3

使用CSS兄弟选择器仅为其第一个类设置样式。以下仅选择li

下的第一个ul

 li > ul {}

您可能想尝试其他兄弟类型选择器。

后代选择器
相邻的兄弟组合器
一般兄弟组合。

后代选择器： 这样可以设置无序列表下任何位置的任何列表项。

ul li{}

相邻的Sibling Combinator：

p + p { font-size: smaller; } /* Selects all paragraphs that directly follow another paragraph */

子组合子选择器：选择标记中严格直接使用<p>个标记的子标记。

p > img

不确定这是否是您正在寻找的东西，但如果它必须是JS免费的话我会使用它。 css-tricks.com

如何在无序列表中获取对子元素的引用

3 个答案: