Bootstrap v3 使用JavaScript实现面板的开关

一、准备工作

首先在网页文件中引入bootstrap的三个文件，分别是jquery、js、css这三个文件

<script src="bootstrap/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

二、Copy面板

先到bootstrap中文网v3文档中复制面板的内容，注意不要直接copy

Bootstrap中文网v3文档之面板内容https://v3.bootcss.com/components/#panels

找到你想要的面板格式后先右击检查

找到两个相对应的类名然后右击复制 

 复制完成后直接返回html文件中进行粘贴即可

这里我使用的是表格面板

<!--面板-->
<div class="panel panel-default container" id="my_panel" style="display: none">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div>

      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

效果如下图所示：

此时面板就完成了 

三、实践

方法一：

 然后开始JavaScript部分

1. 在开始JavaScript之前需要在面板的前面需要写一个button按钮来实现点击时打开和关闭面板
2. 为button标签设置一个id属性
3. 通过style="display:none";来为面板设置默认隐藏
4. 在面板的最下方写一个script标签里面放JavaScript的代码
5. 声明一个变量用来dom查找操作，通过getElementById('按钮的id属性值')来对button按钮进行操作
6. 声明一个变量用来判断奇偶数
7. 通过$('按钮id属性值').click/onclick(function(){在这里面写要执行的代码})为按钮绑定点击事件
8. 使用if来判断奇数和偶数，if(变量名%2==0){这里是偶数时要执行的内容}else{这里是奇数时要执行的内容}变量名+=1；
9. 当为偶数时通过$('面板的id属性值').show();来显示面板，并通过变量名.textContent="button按钮的文字内容";来进行更改button的文字内容
10. 当为奇数时通过$('面板的id属性值').hide();来隐藏面板，并通过变量名.textContent="button按钮的文字内容";来进行更改button的文字内容
11. 此时功能就实现了，当为偶数时显示点击按钮显示被隐藏的面板并改变button按钮的文字内容，当为奇数时点击按钮隐藏显示的面板并改变button按钮的文字内容

//button按钮实现面板的开关
<button id="button" class="btn">开启</button>

<!--面板   为面板设置id属性用来显示和隐藏操作    style="display:none"为面板设置默认隐藏-->
<div class="panel panel-default container" id="my_panel" style="display: none">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div>

      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
<script type="text/javascript">
    //dom操作
	var my_text=document.getElementById('button');
    //变量i用来判断奇偶数
	var i=0;
    //为button按钮绑定点击事件
    $('#button').click(function () {
        //if判断，当为偶数时执行什么内容，当为奇数时执行什么内容
	    if (i%2==0){
            //当为偶数时点击按钮打开面板，并改变按钮的文字内容
            $('#my_panel').show();
		    my_text.textContent="关闭";
	    }else{
            //当为奇数时点击按钮关闭面板，并改变按钮的文字内容
            $('#my_panel').hide();
            my_text.textContent="开启";
	    }
        //i+=1;这个语句必须要有，如果没有的话面板只能打开不能关闭
        i+=1;
    })
</script>

效果对比: 

 

  此时方法一的功能就全部实现了

 方法二：

1. 第一步要将面板复制到html文件中
2. 为面板设置一个id属性，并通过style="display:none"为面板设置默认隐藏状态
3. 写两个button按钮，一个为打开，另一个为关闭，并为使用onclick属性为其设置点击事件
4. 按钮一：当点击时将被隐藏的面板打开
5. 按钮二：当点击时将被打开的面板隐藏
6. 我们只需要将JavaScript中关闭和打开的函数调用到button按钮的onclick中即可实现打开和关闭的功能

 代码演示：

<!--面板-->
<div class="panel panel-default" id="Panel_my" style="display: none">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div>

      <!-- List group -->
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
<!--按钮一-->
<button onclick="ashow()" class="btn">打开</button>
<!--按钮二-->
<button onclick="ahide()" class="btn">关闭</button>
<script>
	//打开面板函数
    function ashow() {   
        //显示被隐藏的面板
	    $('#Panel_my').show();
    }
    //隐藏面板函数
    function ahide() {
        //隐藏被显示的面板
	    $('#Panel_my').hide();
    }
</script>

效果对比： 

 

 此时实现面板开关的两种方法就都完成了！！