2

http://jsfiddle.net/joshr2d2/zU2YH/

当我单击“显示菜单”时，它可以正常工作并显示菜单，但我想让菜单显示得更高并显示“显示菜单”消失的位置。如果可以，我将如何做到这一点？

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" type="text/css" href="http://youngbaptistchurch.tk/css/buttonstyle.css" media="screen" />
<script language=javascript type='text/javascript'> 
function hideDiv(pass) { 
   var divs = document.getElementsByTagName('div'); 
   for(i=0;i<divs.length;i++){ 
     if(divs[i].id.match(pass)){//if they are 'see' divs 
       if (document.getElementById) // DOM3 = IE5, NS6 
         divs[i].style.visibility="hidden";// show/hide 
       else 
       if (document.layers) // Netscape 4 
         document.layers[divs[i]].display = 'hidden'; 
       else // IE 4 
         document.all.hideShow.divs[i].visibility = 'hidden'; 
      } 
   } 
}  

function showDiv(pass) { 
   var divs = document.getElementsByTagName('div'); 
   for(i=0;i<divs.length;i++){ 
     if(divs[i].id.match(pass)){ 
       if (document.getElementById) 
          divs[i].style.visibility="visible"; 
       else 
       if (document.layers) // Netscape 4 
          document.layers[divs[i]].display = 'visible'; 
       else // IE 4 
          document.all.hideShow.divs[i].visibility = 'visible'; 
    } 
  } 
} 
</script>
<style type="text/css">
a:hover{
   color:#ffffff
}
</style>

<script language="javascript"> 
<!--
var state = 'none';

function showhide(layer_ref) {

  if (state == 'block') { 
     state = 'none'; 
  } 
  else { 
     state = 'block'; 
  } 
  if (document.all) { //IS IE 4 or 5 (or 6 beta) 
     eval( "document.all." + layer_ref + ".style.display = state"); 
  } 
  if (document.layers) { //IS NETSCAPE 4 or below 
     document.layers[layer_ref].display = state; 
  } 
  if (document.getElementById &&!document.all) { 
     hza = document.getElementById(layer_ref); 
     hza.style.display = state; 
  } 
} 
//--> 
</script> 

<link rel="stylesheet" type="text/css" href="http://youngbaptistchurch.tk/alt2/style.css" media="screen" />

</head>
<body>

<div style="position:fixed;">
</div>
<font face="Arial">
<center>
<div id="hide">
<a href="javascript:hideDiv('hide')" onclick="showhide('menu');" class="button big transition">Show menu</a>
</div>
<div id="menu" style="display: none;position:relative;">
<a href="javascript:showDiv('hide')" onclick="showhide('menu');" class="button big transition">Hide menu</a><br />
<br />
<a target="_parent" href="test.html" class="button big transition">Option 1</a>
<br />

<a target="_parent" href="test.html" class="button big transition">Option 2</a>

<br />

<a target="_parent" href="test.html" class="button big transition">Option 3</a>
<br />


<a target="_parent" href="test.html" class="button big transition">Option 4</a>
<br />

<a target="_parent" href="test.html" class="button big transition">Option 5</a>
<br />

<a target="_parent" href="test.html" class="button big transition">Option 6</a>
<br />

<a target="_parent" href="test.html" class="button big transition">Option 7</a>
<br />

<a target="_parent" href="test.html" class="button big transition">Option 8</a>

</center>
</div>
</font>
</body>

</html>​
4

2 回答 2

1

在javascript函数中使用显示属性而不是可见性。使用以下代码..

<!DOCTYPE html>
    <html>

    <head>

    <link rel="stylesheet" type="text/css" href="http://youngbaptistchurch.tk/css/buttonstyle.css" media="screen" />
    <script language=javascript type='text/javascript'>
        function hideDiv(pass) {
            var divs = document.getElementsByTagName('div');
            for (i = 0; i < divs.length; i++) {
                if (divs[i].id.match(pass)) {//if they are 'see' divs 
                    if (document.getElementById) // DOM3 = IE5, NS6 
                        divs[i].style.display = 'none'; // show/hide 
                    else
                        if (document.layers) // Netscape 4 
                            document.layers[divs[i]].display = 'none';
                        else // IE 4 
                            document.all.hideShow.divs[i].display = 'none'; ;
                }
            }
        }

        function showDiv(pass) {
            var divs = document.getElementsByTagName('div');
            for (i = 0; i < divs.length; i++) {
                if (divs[i].id.match(pass)) {
                    if (document.getElementById)
                        divs[i].style.display = 'block';
                    else
                        if (document.layers) // Netscape 4 
                            document.layers[divs[i]].display = 'block';
                        else // IE 4 
                            document.all.hideShow.divs[i].display = 'block';
                }
            }
        } 
    </script>
    <style type="text/css">
    a:hover{
        color:#ffffff
    }
    </style>

    <script language="javascript"> 
    <!--
        var state = 'none';

        function showhide(layer_ref) {

            if (state == 'block') {
                state = 'none';
            }
            else {
                state = 'block';
            }
            if (document.all) { //IS IE 4 or 5 (or 6 beta) 
                eval("document.all." + layer_ref + ".style.display = state");
            }
            if (document.layers) { //IS NETSCAPE 4 or below 
                document.layers[layer_ref].display = state;
            }
            if (document.getElementById && !document.all) {
                hza = document.getElementById(layer_ref);
                hza.style.display = state;
            }
        } 
    //--> 
    </script> 

    <link rel="stylesheet" type="text/css" href="http://youngbaptistchurch.tk/alt2/style.css" media="screen" />

    </head>
    <body>

    <div style="position:fixed;">
    <gcse:searchbox></gcse:searchbox>
    </div>
    <gcse:searchresults></gcse:searchresults>
    <font face="Arial">
    <center>
    <div id="hide">
    <a href="javascript:hideDiv('hide')" onclick="showhide('menu');" class="button big transition">Show menu</a>
    </div>
    <div id="menu" style="display: none;position:relative;">
    <a href="javascript:showDiv('hide')" onclick="showhide('menu');" class="button big transition">Hide menu</a><br />
    <br />
    <a target="_parent" href="test.html" class="button big transition">Option 1</a>
    <br />

    <a target="_parent" href="test.html" class="button big transition">Option 2</a>

    <br />

    <a target="_parent" href="test.html" class="button big transition">Option 3</a>
    <br />


    <a target="_parent" href="test.html" class="button big transition">Option 4</a>
    <br />

    <a target="_parent" href="test.html" class="button big transition">Option 5</a>
    <br />

    <a target="_parent" href="test.html" class="button big transition">Option 6</a>
    <br />

    <a target="_parent" href="test.html" class="button big transition">Option 7</a>
    <br />

    <a target="_parent" href="test.html" class="button big transition">Option 8</a>

    </center>
    </div>
    </font>
    </body>

    </html>​
于 2012-12-22T09:46:53.610 回答
1

你可以使用 JQuery

<div id="toggleMenu" onclick="function(){
    if ($("#toggleMenu").html() == "Show Menu") {
        $("#toggleMenu").html("Hide Menu");
        //TODO logic
    } else if ($("#toggleMenu").html() == "Hide Menu") {
        $("#toggleMenu").html("Show Menu");
        //TODO logic
    }
}">Show Menu</div>

但是有很多方法可以做到这一点，希望这会有所帮助

于 2012-12-22T06:55:09.583 回答