1

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

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

我不想使用 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>
4

3 回答 3

0

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

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

http://jsfiddle.net/CDXH5/

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

于 2013-02-16T02:39:51.960 回答
0

为您的 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
    }

 });

}   

}
于 2013-02-16T03:23:18.673 回答
0

仅使用 CSS 兄弟选择器来设置其类中的第一个样式。下面只选择一个li下的第一个ul

 li > ul {}

您可能还想尝试其他同级类型选择器。

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

后代选择器： 这是对无序列表下方任何位置的任何列表项进行样式设置。

ul li{}

相邻兄弟组合器：

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

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

p > img

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

于 2013-02-16T03:44:34.617 回答