jQuery show hide DIV

Question

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

我的问题是

1）如何针对许多代码段重复此操作？目前点击show hide，定位我页面上的所有代码片段

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）您的代码将正确隐藏许多具有 class 'code'的代码段。

2）在页面加载时，您可以启动隐藏按钮单击（）以隐藏所有片段。要进行隐藏转换，只需在隐藏函数中传递延迟时间，如hide(1000); < / p>

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