Hide/Show 切换 Jquery

Question

我的段落首先需要隐藏，我不知道如何在页面加载时隐藏它。

我正在使用切换 jquery 到 expand/hide 我的段落。我怎样才能做到这一点？

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#expand").toggle("slow");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<p id="expand">Small or large business look no further for an office cleaning company in Raleigh. Feel confident that commercial cleaning services will get the job done right. Call or contact us today for a quote.</p>

<button id="toggle">Hide/Expand</button>

Answer 1

最初用CSS隐藏它：

p#expand {
   display:none;
}

Answer 2

 $(document).ready(function () {
    $("#expand").hide();
    $("#toggle").on('click', function(){
        $("#expand").toggle('slow');
    })
});

<!DOCTYPE html> 
<html> 
<head> 
    <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   </script> 
    <title></title> 
  </head> 
  <body> 


  <p id="expand">Small or large business look no further for an office cleaning company in Raleigh. Feel confident that commercial cleaning services will get the job done right. Call or contact us today for a quote.</p>

 <button id="toggle">Hide/Expand</button>
 </body> 
 </html>

<!DOCTYPE html> 
<html> 
<head> 
    <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   </script> 
    <title></title> 
  </head> 
  <body> 


  <p id="expand">Small or large business look no further for an office cleaning company in Raleigh. Feel confident that commercial cleaning services will get the job done right. Call or contact us today for a quote.</p>

 <button id="toggle">Hide/Expand</button>
 </body> 
 <script type="text/javascript"> 
 $(document).ready(function () {
    $("#expand").hide();
    $("#toggle").on('click', function(){
        $("#expand").toggle('slow');
    })
});

</script>
</html>

Hide/Show 切换 Jquery

Hide/Show Toggle Jquery

jquery

toggle

show-hide