Question

我的页面上有一些div，当点击链接时，他们需要切换（显示/隐藏）

JS

var state = 'none';

function showhide(layer_ref) {
//alert(eval( "document.all." + layer_ref + ".style.display") == "none")

if (document.all) { //IS IE 4 or 5 (or 6 beta)
if(eval( "document.all." + layer_ref + ".style.display") == "none"){
eval( "document.all." + layer_ref + ".style.display = 'block'");
}else{
eval( "document.all." + layer_ref + ".style.display = 'none'");
}

}
if (document.layers) { //IS NETSCAPE 4 or below
if(document.layers[layer_ref].display == none){
document.layers[layer_ref].display = "block";
}else{
document.layers[layer_ref].display = "none";
}
}
if (document.getElementById &&!document.all) {
if(document.getElementById(layer_ref).style.display == "none"){
document.getElementById(layer_ref).style.display = "block";
}else{
document.getElementById(layer_ref).style.display = "none";
}
}
}

HTML

     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div1" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div2" style="display: none;">divcont</div>
     </div>
     <div class="faq-row" style="z-index: 976;">
       <span class="itp-title"><a href="#" onclick="showhide('div1');">title</a></span>
        <div id="div3" style="display: none;">divcont</div>
     </div>

我的问题是无论我点击什么链接它只切换第一个div？任何人都看到我出错的地方？感谢

Answer 1

你的第一个问题是尝试编写非平凡的crossbrowser JavaScript。如果您使用jQuery之类的内容，这将会更加简单，更简单。

尽管如此，您的问题是您的onClick处理程序都指向同一个id。

onclick="showhide('div1');"

将这些改为相关的div id，你应该没问题。

如果你使用像jQuery这样的东西，这个函数虽然无关紧要，你可以这样做：

onclick="$('#div1').toggle()"

Answer 2

你有每个showhide事件的showhide（div1）..应该读取div2和div3

编辑：另外，另一个表演/隐藏可能就是这个...

function showhide(elementid){
obj=document.getElementById(elementid);
obj.style.display=(obj.style.display=='none')?(''):('none');    
}//both

Answer 3

您在每次onclick事件上都会调用"showhide('div1');"。请尝试将其更改为"showhide('div1');"，"showhide('div2');"和"showhide('div3');"。

Answer 4

你总是打电话给showhide('div1')。在每个div的onclick上

Answer 5

如果你有jQuery：

function showhide(element) {
    $(element).toggle();
}

当然会简单得多。 jQuery是一个选项吗？

Answer 6

以下是我们2011年的表现;）

$('.itp-title').click(function(){
    $(this).next().toggle();
});

工作演示：http://jsfiddle.net/AlienWebguy/rcr38/

了解这一点：http://jquery.com

Answer 7

您必须使用每个div id调用showHide（）。这是一个实例http://toggle-example.qip.li/edit/

切换Div Javascript

7 个答案: