4

メニューに使用している表示/非表示スクリプトがあります。メイン リンクをクリックすると、その下にリストが表示されます。リンクをクリックすると開くように少し変更する方法があるかどうか疑問に思っていましたが、次のリンクをクリックすると、もう一度クリックしない限り、すべてを開いたままにするのではなく、他のリンクを閉じます。

これが私のスクリプトです：

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>


<a href="#" onclick="toggle_visibility('list1');">
       <p>List One</p>
       </a>
       <div id="list1" style="display:none;">
         <ul>
           <li>Item One</li>
           <li>Item Two</li>
           <li>Item Three</li>
         </ul>
       </div>
4

2 に答える 2

14

これがあなたのコードだとしましょう：

<a href="#" onclick="toggle_visibility('list1');">
  <p>List One</p>
</a>
<div id="list1" style="display:none;">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>
<a href="#" onclick="toggle_visibility('list2');">
  <p>List Two</p>
</a>
<div id="list2" style="display:none;">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>

これに変更します：

<a href="#" onclick="toggle_visibility('list1');">
  <p>List One</p>
</a>
<div id="list1" class="alist" style="display:none;">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>
<a href="#" onclick="toggle_visibility('list2');">
  <p>List Two</p>
</a>
<div id="list2" class="alist" style="display:none;">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>

そして、JavaScriptを次のようにします。

function toggle_visibility(id) {
    var list = document.getElementsByClassName("alist");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display = 'none';
    }
    var e = document.getElementById(id);
    if(e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}

これがJSFiddleです。

これにプレーンJavaScriptを使用する代わりに、jQueryを使用することをお勧めします。

これがjQueryでそれを行う方法です：

function toggle_visibility(id) {
  $(".list").hide();
  $("#" + id).toggle();
}
于 2013-03-08T07:30:22.130 に答える
3

現在のリストを除いてすべてのリストを非表示にする関数をもう 1 つ追加します。

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.list');
    for (var i = lists.length; i--; ) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

http://jsfiddle.net/q2E5e/

于 2013-03-08T07:36:22.273 に答える