在列表中隐藏/显示div

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

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

来源

2012-12-05 Die 20

，你能否告诉我们，HTML是什么样子？ – Stegrex

检查这是否真的是你想要的** document.getElementById（“。toggleOptions”）; ** ..这找我，因为你想获得类的toggleOptions元素...否则使用document.getElementsByClass（'toggleOptions '），但这将永远是一个数组，所以你必须选择你想要的一个 – Mik

Stegrex，我只是用HTML更新了我的代码。 Mik，我确实想使用类，我已经用ClassName试过了，但没有显示/隐藏任何隐藏的div。 –

在每个组的周围放置另一个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-05 19:51:21 Mik

Mik我更新了您的建议更改的初始代码。它似乎仍然没有工作。 –

你是否尝试过新版本..？你可以在jsfiddle链接 – Mik

Mik，Nice man！但是，如何在链接显示toggleOptions div时保持显示？原因我想使用链接来显示/隐藏toggleOptions div。 –

.toggleOptions不是有效的id DOM属性值。你想通过它的className获取一个元素吗？那么您应该使用getElementsByClassName，或者删除文字中的前导点。

来源

2012-12-05 19:41:32

在列表中隐藏/显示div

回答

相关问题