3

チュートリアルを使用して、HTML で折りたたみ可能なリストを作成しています。

私のHTMLは次のようになります。

<li>
    <a href="#" onclick="test('node1')">hello</a>
    <ul id="node3" style="display:none">
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
    </ul>
</li>
<li>
    <a href="#" onclick="test('node2')">test</a>
    <ul id="node3" style="display:none">
        <li>Sub-item 1</li>
        <li>Sub-item 2</li>
    </ul>
</li>

ノード 3、4、5 など

次の JavaScript を使用して、これらすべてのテーブルを折りたたもうとしています。

function test2(id, link) {
    var e = document.getElementById(id);
    if (e.style.display == '') {
        e.style.display = 'none';
        link.innerHTML = 'Expand';
    } else {
        e.style.display = '';
        link.innerHTML = 'Collapse';
    }
}

しかし、関数を呼び出すと、すべてのノードを選択するために何を入力すればよいかわかりません。各ノードに個別のコントロールが必要なので、すべての名前を同じに変更することはできません。

<a href="#" onclick="test2('node????', this)">Collapse</a>
4

1 に答える 1

3

そのためにclass属性を使用できます。

<li>
 <a href="#" onclick="test('node1')">hello</a>
 <ul id="node1" class="node" style="display:none">
  <li>Sub-item 1</li>
  <li>Sub-item 2</li>
 </ul>
</li>
<li>
 <a href="#" onclick="test('node2')">test</a>
 <ul id="node2" class="node" style="display:none">
  <li>Sub-item 1</li>
  <li>Sub-item 2</li>
 </ul>
</li>

あなたが本当にそれらすべてを折りたたんで、それらの可視性を切り替えたくないと仮定すると、あなたはこのようなものを書くことができます...

function test2(className, link) {
 var e = document.getElementsByClassName(className);

 for (var i = 0, len = e.length; i < len; i++) {
  e[i].style.display = "none";
 }

 link.innerHTML = "Expand";
}

...そしてそれをそのように呼びます...

<a href="#" onclick="test2('node', this)">Collapse</a>

getElementsByClassNameは、古いブラウザー（<IE9）では機能しないことに注意してください。

更新： これを実現する別の方法は、CSSを使用し、相互の親要素のクラス名を変更することです。そのためのサンプルCSSコードは次のとおりです。

#mutualParent.hide-nodes li.node {
 display: none;
}

次に、このように関数を変更します...

function test2(className) {
 document.getElementById("mutualParent").className += className;
}

...そしてそれをそのように呼びます：

<a href="#" onclick="test2('hide-nodes')">Collapse</a>

test（）関数を使用して表示を切り替えたい場合は、最初にclassNameを削除する必要があります。そうしないと、非表示のままになります。<ul>また、このコードを機能させるには、スタイル属性の優先度が高いため、タグからスタイル属性を削除する必要があります。

于 2012-11-06T21:26:32.527 に答える