jQuery 显示隐藏 DIV

Question

我正在尝试使用 jquery 在我的网页上显示/隐藏代码片段。通过单击按钮控制显示/隐藏。下面是我将使用的代码示例

我的问题是

1) 如何对许多代码片段重复此操作？现在点击显示隐藏，定位我页面上的所有代码片段

2) 是否可以默认隐藏代码片段，即在页面加载时隐藏代码并创建平滑过渡效果？

 <button class ="hide button-success">Hide</button>
 <button class= "show button-warning">Show</button>

 <div class ="code">
  <script type="text/javascript"></script>
 </div>




<script>
$(document).ready(function(){
    $(".hide").click(function(){
    $(".code").hide();
});
    $(".show").click(function(){
    $(".code").show();
    });
});
</script>

感谢您的帮助

Answer 1

以下是您问题的答案:

1)您的代码将正确地隐藏许多具有类“代码”的代码片段。

2) 在页面加载时，您可以启动隐藏按钮 click() 来隐藏所有片段。为了提供隐藏转换，只需在隐藏函数中传递延迟时间，如 hide(1000 );

$(document).ready(function(){
    $(".hide").click(function(){
        $(".code").hide(1000);
    });
   $(".show").click(function(){
        $(".code").show(1000);
    });
  $(".hide").click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class ="hide button-success">Hide</button>
 <button class= "show button-warning">Show</button>

 <div class ="code">
   Code 1
  <script type="text/javascript"></script>
 </div>
 <div class ="code">
      Code 2
  <script type="text/javascript"></script>
 </div>
 <div class ="code">
      Code 3
  <script type="text/javascript"></script>
 </div>
 <div class ="code">
      Code 4
  <script type="text/javascript"></script>
 </div>
 <div class ="code">
      Code 5
  <script type="text/javascript"></script>
 </div>