Question

我无法搞清楚这一点。用户单击Link1后，我希望它在使用Javascript单击Link2时关闭。我已经在jquery中看到了一个或两个这样的例子，但我已经使用这种方法编写了代码，所以我更愿意从头开始。谢谢大家！

HTML ...

<style>
.hidden { display: none; }
.visible { display: block; }
</style>
</head>

<body>
<div id="col2">
 <a href="javascript:unhide('contentONE');">Link 1</a>
 <div id="contentONE" class="hidden">
  <h3>contentONE</h3>
  <ul>
    <li><a href="#nogo">Content1.1</a></li>
    <li><a href="#nogo">Content1.2</a></li>
  </ul>
 </div>
</div>

<div id="col2">
 <a href="javascript:unhide('contentTWO');">Link 2</a>
 <div id="contentTWO" class="hidden">
  <h3>contentTWO</h3>
   <ul>
    <li><a href="#nogo">Content2.1</a></li>
    <li><a href="#nogo">Content2.2</a></li>
   </ul>
  </div>
</div>

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>
</body>

Answer 1

尝试这样的事情：

var collapsables = document.getElementsByClassName('collapsable');

function unhide(divID) {

    // Hide previous
    for (var i = 0; i < collapsables.length; i++) {
        collapsables[i].className = 'collapsable hidden';
    }

    // Show new
    var item = document.getElementById(divID);
    if (item) {
        item.className = 'collapsable';
    }
}

Javascript隐藏/取消隐藏文字

1 个答案:

演示：http://jsfiddle.net/MLmXa/