javascript - 用 toggleMe 脚本替换 div

Question

我有三个链接的图像，每个图像都有不同的 ID。我还有三个引用相应图像 ID 的 div。我已经在页面中启用了 toggleMe 脚本并且可以正常工作。我的问题是如何更改此脚本，以便不必再次单击链接来折叠/展开内容？例如...如果我单击图像 A，我希望图像 A 的内容展开。然后，如果我单击图像 B，我希望图像 A 的内容折叠并展开图像 B，而无需再次单击图像 A。或者，如果我单击 Image CI，则希望以前的内容折叠并扩展 Image C 的新内容。

<script type="text/javascript">
function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}
</script>

Answer 1

此功能称为手风琴。jquery ui 有一个开箱即用的实现。http://jqueryui.com/accordion/

把它放在你的脑海中：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script> $(function() {
    $( "#accordion" ).accordion();
    });
</script>

并且您的内容将具有以下结构：

 <div id="accordion">
    <h3>Section 1</h3>
    <div>
      <p>
        First
      </p>
    </div>
    <h3>Section 2</h3>
    <div>
      <p>
        Second 
      </p>
    </div>
    <h3>Section 3</h3>
    <div>
      <p>
        Third
      </p>
    </div>
  </div>

这是一个例子：小提琴

Answer 2

<script type="text/javascript">
function toggleMe(a){
  var allIds = ['one', 'two', 'three']; // store all of involved ids here
  var e=document.getElementById(a);
  if(!e)return true;
  for (var i = 0; i < allIds.length; i++) {
    if (allIds[i] != a) {
      document.getElementById(allIds[i]).style.display="none";
    }
  }
  if(e.style.display=="none") e.style.display="block";
  return true;
}
</script>