Javascript 用toggleMe脚本替换div

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

功能切换表（a）{
var e=document.getElementById（a）；
如果（！e）返回true；
如果（e.style.display==“无”）{
e、 style.display=“块”
}否则{
e、 style.display=“无”
}
返回true；
}

此功能称为手风琴。jQueryUI有一个现成的实现

把这个放在你的脑子里：

$（函数（）{
$（“#手风琴”）。手风琴（）；
});

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

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

第一节

弗斯特

第二节

第二

第三节

第三

下面是一个例子：

功能切换表（a）{
var allIds=['one'，'two'，'three']；//将所有涉及的ID存储在此处
var e=document.getElementById（a）；
如果（！e）返回true；
对于（变量i=0；i

您是否可以使用jqueryyes，但我希望尽可能简单。您是否可以共享您的html链接1链接2链接3第一部分文本第二部分文本第三部分文本这很有帮助，但是所有内容部分最初都会显示，然后，当点击链接时，它们就会消失。我无法通过再次单击链接将它们取回。我希望它在打开页面时不显示，然后当你单击链接时，它们彼此切换，一次只显示一个div内容。等等。。。很抱歉我忘了把AllID换成我的ID。我换了衣服，他们现在正互相换衣服。然而，它是有效的。。。如何在最初加载页面时不显示div。报税表哪里是假的；语句go所以在单击链接之前不显示div？还有一件事。。。例如如果我点击链接1，然后点击链接2，它们会像应该的那样改变。但是，如果我再次点击链接2。。。潜水艇消失了。我不希望一个div消失，如果他们再次点击它。。。只是为了让div再次出现，或者基本上保持不变，不改变。我希望这是有道理的。基本上，这是用于导航栏，在不同的菜单选项之间切换，所以我总是希望显示一个div。我是否需要一个占位符div来最初显示，其中没有任何内容，然后允许在链接1、链接2和链接3之间切换？如果不想隐藏div，则需要从代码中删除

}else{e.style.display=“none”}

部分。是否可以在删除此部分的情况下显示新的代码块，当我从代码中删除}else{e.style.display=“none”}时，dreamweaver中出现了一个错误。这是一个很好的脚本，但是我需要div内容出现在相同的位置。例如，如果我有三个图像链接串联在一起，那么当你点击链接1时，在这些图像链接下面会出现另一组链接（子菜单），点击链接2，相同的子菜单会随着一组不同的链接而改变，依此类推。

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

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