如何讓div轉到隱藏div以前的位置？

http://jsfiddle.net/joshr2d2/zU2YH/如何讓div轉到隱藏div以前的位置？

當我點擊「顯示菜單」，它工作正常，並顯示菜單，但我想使菜單顯得更高，並顯示其中「節目菜單」 disappeared.If我能怎麼做我這發生了嗎？

<!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>

來源

2012-12-22 Joshua Reynolds

你能分享你的代碼嗎？ –

對不起，忘記了密碼。 –

您可以使用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>

但也有許多方法可以做到這一點，希望這有助於在JavaScript function.Use下面的代碼

來源

2012-12-22 06:55:09 wonderwall

請不要在這種情況下使用內嵌JavaScript！ –

@Derek我只是展示瞭如何簡化方法，將函數重構爲單獨的js文件/標籤或者使用主幹等進行組織，並且不在上下文中，並且由用戶自己提供。 – wonderwall

好吧，您可以發佈代碼在這裏沒有HTML部分。 –

使用display屬性，而不是知名度..

<!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-22 09:46:53 sreejithsdev

它在jsfiddle中工作，但沒有在其他地方工作 –

如何讓div轉到隱藏div以前的位置？

回答

相關問題