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

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 に答える
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 に答える