首页 文章

隐藏/显示列表中的div

提问于
浏览 次
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>
javascript html

2 回答

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

    }

    回复于
  • 0

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

    回复于

相关问题