0

我有一个包含任意数量项目的列表。每个项目都有许多可以对其执行的操作。我想在用户单击与特定列表项关联的链接时出现的 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";
    }
}

这是 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>
4

2 回答 2

0

.toggleOptions不是有效的idDOM 属性值。您是否尝试通过其类名获取元素？然后你应该使用getElementsByClassName，或者删除文字中的前导点。

于 2012-12-05T19:41:32.620 回答
0

在每个组周围放置另一个 div 或其他内容：...将 toggleOptions() 函数放在 onclick 并传递 href a # 使其不为空...通过 toggleOptions(this) 以了解单击了哪个元素

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

在这里试试这个http://jsfiddle.net/YE6XZ/1/

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;

}

于 2012-12-05T19:51:21.813 回答