隐藏/显示切换 Jquery答案

【问题标题】：Hide/Show Toggle Jquery隐藏/显示切换 Jquery
【发布时间】：2015-04-01 02:36:05
【问题描述】：

我的段落一开始需要隐藏，当页面加载时我不知道如何隐藏它。

我正在使用切换 jquery 来展开/隐藏我的段落。我怎样才能做到这一点？

$(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>

【问题讨论】：

你试过引导程序吗？请参见此处的示例。这可能会帮助你。 getbootstrap.com/javascript/#collapse-example-accordion
我没有，但感谢您的想法！

标签： jquery toggle show-hide

【解决方案1】：

最初用 CSS 隐藏它：

p#expand {
   display:none;
}

【讨论】：

谢谢！但它只影响一系列列中的一个段落。其他列未显示。我已将 id=expand 与其他人附加在一起，可能是什么问题？
使用 css 类而不是 id（您只能有一个具有给定 id 的元素）：
lorem ipsum
，然后在您的样式表中：p .hide { 显示：无； }

【解决方案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>

【讨论】：