Javascript 隐藏/显示列表中的div

我有一个包含任意数量项目的列表。每个项目都有许多可以对其执行的操作。我想在用户单击与特定列表项关联的链接时显示的div中显示这些操作

我尝试了以下代码，但当我单击链接时，它只显示第一个隐藏div，而不是与链接关联的隐藏div

<script language="javascript"> 
function toggleOptions() {
        var ele = this;
        var text = this.parentNode.getElementsByClassName("displayOptions");


    if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "TESTING";
    }
    else {
    ele.style.display = "block";
    text.innerHTML = "Hide GPS";
    }
} 

函数toggleOptions（）{
var ele=这个；
var text=this.parentNode.getElementsByClassName（“显示选项”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“测试”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏GPS”；
}
} 

这是HTML。这个列表可能是无穷无尽的，这只是列表的一个摘录

     <a href="javascript:toggleOptions();">
        ITEM 1 OPTIONS
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 1 OPTIONS
     </div>

     <a href="javascript:toggleOptions();">
        ITEM 2 OPTIONS
     </a>
     <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>

     <a href="javascript:toggleOptions();">
        ITEM 3 OPTIONS
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>

项目1备选方案
项目2备选方案
项目2备选方案

.toggleOptions

不是有效的

id

DOM属性值。您是否试图通过元素的类名获取元素？然后您应该使用，或者删除文本中的前导点。

在每个组周围放置另一个div或其他内容：。。。将toggleOptions（）函数设置为onclick并传递href a#，使其不为空。。。传递toggleOptions（此选项）以了解单击了哪个元素

<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 1 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 2 OPTIONS
     </div>
</div>
<div>
    <a href="#" onclick="toggleOptions(this);" style="display:block;">
        SHOW
     </a>
      <div class="toggleOptions" style="display: none">
        ITEM 3 OPTIONS
     </div>
</div>​

---

}

您能告诉我们HTML是什么样子吗？检查这是否真的是您想要的文档。getElementById（“.toggleOptions”）。。当您想要获得一个带有类toggleOptions的元素时，这将为我查找。。。否则，请使用document.getElementsByClass（'toggleOptions'），但这将始终是一个数组，因此您必须选择要使用哪个数组。Tegrex，我刚刚用HTML更新了代码。Mik，我确实想使用类，我尝试过使用类名，但它没有显示/隐藏任何隐藏的div。在DOM中不能多次使用id，但使用了三次

id=“toggleOptions”

。。。（无效！）Raudberdaniel，是的，我理解，但我只是想展示最终产品的外观。如果您按原样尝试代码，则无论您单击哪个项目，都会显示项目1选项。Mik I使用您建议的更改更新了初始代码。它似乎仍然不起作用。你试过新版本吗。。？你可以在jsfiddle linkMik中查看，好人！但是，当显示toggleOptions div时，如何使链接保持显示状态？因为我想使用链接来显示/隐藏toggleOptions div.Mik，实际上如何显示displayOptions div中的内容？例如，当您单击“显示”时，应该会显示“项选项1”，但实际上可以查看jquery。。。。使用jquery，这件事要容易得多。。。例如，它提供了一个toggleClass函数，因此您不需要检查元素是否隐藏。麻生太郎

function toggleOptions(e) {
    var ele = e;
    var text = e.parentElement.querySelector('.toggleOptions')

if(text.style.display == "none") {
    //ele.style.display = "none";
    text.style.display = "block";
    text.innerHTML = "TESTING";
    ele.innerHTML = "hide";
}
else {
    text.style.display = "none";
    //text.innerHTML = "Hide GPS";
    ele.innerHTML = "show";
}

return false;