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

2）在页面加载时，您可以启动hide按钮click（）以隐藏所有片段。要进行隐藏过渡，只需在hide函数（如hide(1000);传递延迟时间即可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>