Toggle Div Javascript

Toggle Div Javascript

本文关键字：Javascript Div Toggle      更新时间：2023-09-26

我的页面上有一些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?有人知道我哪里出错了吗?由于

您的第一个问题是试图编写不平凡的跨浏览器JavaScript。如果你使用像jQuery这样的东西，那么会简单得多。

也就是说，您的问题是您的onClick处理程序都指向相同的id。

onclick="showhide('div1');"

将这些更改为相关的div id，您应该可以。

如果你使用jQuery之类的东西，这个函数就无关紧要了，你可以这样做:

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

为每个showhide事件设置了showhide(div1)。应该是div2和div3

编辑:另外，另一个show/hide可能是这样的…

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

每次onclick事件都调用"showhide('div1');"。尝试将它们更改为"showhide('div1');", "showhide('div2');"和"showhide('div3');"。

你总是在调用showhide('div1')。在每个div的onclick

如果您有jQuery:

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

当然要简单得多。jQuery是一个选项吗?

2011年我们是这样做的;)

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

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

学习这个:http://jquery.com

必须对每个div id调用showHide()。下面是一个实例http://toggle-example.qip.li/edit/

相关文章：