Html 使用 javascript 显示/隐藏脚本

Show/Hide script using javascript

提问by Ni Ck

I have a show/hide script that I am using for a menu. When I click a main link it brings up a list below it. I was wondering if there is a way to alter it a bit so that when I click the link it opens but when I click the next one it closes the other one instead of leaving them all open unless you click it again to close.

我有一个用于菜单的显示/隐藏脚本。当我单击主链接时，它会在其下方显示一个列表。我想知道是否有一种方法可以稍微改变它，以便当我单击链接时它会打开，但是当我单击下一个链接时，它会关闭另一个而不是让它们全部打开，除非您再次单击它关闭。

Here is my script:

这是我的脚本：

<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>

回答by Lucas

Suppose this is your code:

假设这是您的代码：

<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>

Change it to this:

改成这样：

<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>

And make your JavaScript this:

让你的 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';
    }
}

Here's a JSFiddle.

这是一个JSFiddle。

Instead of using plain JavaScript for this, I suggest you use jQuery.

与其使用纯 JavaScript，我建议您使用 jQuery。

Here's how I would do it in jQuery:

这是我在 jQuery 中的做法：

function toggle_visibility(id) {
  $(".list").hide();
  $("#" + id).toggle();
}

回答by dfsq

I would add one more function to hide all the lists but one current:

我会再添加一项功能来隐藏所有列表，但只有一个当前列表：

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/

http://jsfiddle.net/q2E5e/