Toggling Layers in javascript_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-29 09:15 出处：网络

The following JavaScript I am using which works fine with single onclick function. I need two onclick functions at the same time.

相关专题：javascript

The following JavaScript I am using which works fine with single onclick function. I need two onclick functions at the same time.

// JavaScript Document
var state = 'hidden';
function showhide(layer_ref) {
    if (state == 'visible') {
        state = 'hidden';
    }
    else {
        state = 'visible';
    }
    if (document.all) { //IS IE 4 or 5 (or 6 beta)
        eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) { //IS NETSCAPE 4 or below
        document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
    }
}

The following HTML onclick is working fine.

<a href="#" onclick="showhide('sidebar')" ><img src="s开发者_如何学Goupports/images/cp.png" width="86" height="20" /></a>

Now, I need the exact syntax to toggle two layers at the same time. I tried using following code but its not working. Can anybody correct it for me.

<a href="#" onclick="showhide('sidebar'); showhide('div_menu');" ><img src="supports/images/cp.png" width="86" height="20" /></a>

Try this code.

<html>
    <head>
        <script type="text/javascript">
            var setT;
            function toggle(id){
                var myDiv=document.getElementById(id);
                if(myDiv.style.visibility=='hidden'||myDiv.style.visibility==''){
                    myDiv.style.visibility='visible';
                    setT = setTimeout('closeD("'+id+'")',3000)
                }
                else{closeD(id)}
            }
            function closeD(id){
                document.getElementById(id).style.visibility='hidden';
                if(setT){clearTimeout(setT)}
            }
        </script>
    </head>
    <body>
        <a href="#" onClick="toggle('mydiv'); toggle('mydiv2')">show/hide</a>
        <br>
        <div id="mydiv">my div</div>
        <div id="mydiv2">my div2</div>
    </body>
</html>

don't use var state = 'hidden', it's a global variable, use state as the function para of showhide.

What zhongshu meant was that there's only one state variable that's being shared between the different layers.

I have no clue why you'd want to support browsers as old as Netscape 4 or IE 5 when you won't see them anywhere but a museum or retro computing fair and I was only using HTML back when they were around (not JS), so all I can really do is offer a snippet for all modern browsers which should illustrate the best way to think about solving this problem:

// Reinvent jQuery's .toggle() without the years of polish and bugfixing
function showhide(node_id) {
    if (document.getElementById) {
        node = document.getElementById(node_id);
        state = node.style.visibility

        if (state == 'visible') { 
            node.style.visibility = 'hidden';
        } else { 
            node.style.visibility = 'visible';
        }
    }
}