如何在此HTML/JQUERY代碼中添加垂直滾動？

我在這裏掙扎得到垂直滾動工作。這裏是HTML/JQUERY代碼如何在此HTML/JQUERY代碼中添加垂直滾動？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>teste1</title> 
    <script type="text/javascript" src="jquery-1.4.4.js"></script> 

<style type="text/css"> 
html { 
font: 12px Arial, Helvetica, sans-serif; 
text-align: center; 
} 
#conteudo, #oculto { 
background: #e5e5e5; 
width: 480px; 
margin: auto; 
padding: 10px; 
border: solid 1px #ccc; 
} 
#conteudo h1 { 
font-size: 15px; 
} 
#oculto { 
display: none; 
margin-top: 30px; 
overflow: scroll; 
width: 200px; 
height: 100px; 
} 
</style>  

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("h1#mostra").click(function() { 
       $("div#oculto").toggle("slow"); 
      }); 
     }); 
    </script> 

</head> 

<body> 

    <div id="conteudo"> 
    // Aqui o elemento que exibe o elemento oculto 
    <h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1> 
    </div> 

    // aqui o elemento oculto 
    <div id="oculto"> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 
     dddddddddddddddddddddddd dddddddddddddddd<br /> 

    </div> 

</body> 
</html>

我需要添加滾動到「#oculto」。我已添加此代碼，但它不工作：

#oculto { 
display: none; 
margin-top: 30px; 
overflow: scroll; 
width: 200px; 
height: 100px; 
}

我的問題。在這種情況下可以添加滾動條？

最好的問候，

來源

2011-04-28 André

是這樣的 - >http://jsfiddle.net/Husar/yYcsU/92/可能是你想要什麼？

來源

2011-04-28 15:16:51 Maverick

您需要刪除「display：none;」條目。

UPDATE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>teste1</title> 
     <script type="text/javascript" src="jquery-1.4.4.js"></script> 


     <style type="text/css"> 
      html { 
      font: 12px Arial, Helvetica, sans-serif; 
      text-align: center; 
      } 
      #conteudo, #oculto { 
      background: #e5e5e5; 
      width: 480px; 
      margin: auto; 
      padding: 10px; 
      border: solid 1px #ccc; 
      } 
      #conteudo h1 { 
      font-size: 15px; 
      } 

     </style>  



    </head> 

    <body> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
      $("#mostra").click(function() {   
      $(".oculto").toggle("slow"); 
      }); 
      }); 
     </script> 

     <div id="conteudo"> 
      // Aqui o elemento que exibe o elemento oculto 
      <h1 id="mostra">Clique aqui para exibir/ocultar um elemento</h1> 
     </div> 

     // aqui o elemento oculto 
     <div id="oculto" class="oculto"> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 
      dddddddddddddddddddddddd dddddddddddddddd<br /> 

     </div> 

    </body> 
</html>

來源

2011-04-28 14:27:12

示例：http://jsfiddle.net/yYcsU/61/ – 2011-04-28 14:29:42

感謝您的回覆。但它不起作用。我做了切換後，不再工作。一些線索？ – 2011-04-28 14:41:47

#oculto風格被定義兩次。也許他們是相互衝突的？ – jimyshock 2011-04-28 14:58:03

如何在此HTML/JQUERY代碼中添加垂直滾動？

回答

相關問題