jQuery实现显示/隐藏菜单

2018-8-15

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery显示菜单隐藏和显示</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    
<script>
  /*jQuery演示*/
  $(function(){
   $("#button").click(function(){
     if($(".div2").css("display")=="block"){
      $(".div2").css("display","none");
    }else {
      $(".div2").css("display","block");
    }
   });
   });
</script>
<!--div演示-->
<button type="button" id="button" class="btn btn-primary">显示/隐藏面板</button>
<div class="div2" style="display: block">
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
</div>
</body>
</html>

微信扫描下方的二维码阅读本文

阅读剩余

版权声明：
标题：jQuery实现显示/隐藏菜单
作者：admin
链接：https://www.kmtky.com/119.html
文章版权归作者所有，未经允许请勿转载。
声明：仅供内部测试和技术交流使用，任何非法商业使用及商业利益冲突带来的法律纠纷，与本人无关，本人概不负责，请下载后24小时内删除，谢谢合作！如有侵权请于作者联系，尽快删除。

THE END

jquery实现全选、不选、反选的两种方法

<<上一篇

jQuery实现导航样式布局操作示例【可自定义样式布局】

下一篇>>

jQuery实现显示/隐藏菜单

分类