Bootstrap中可折叠的打开/关闭面板的代码可以正常打开,但是打开一个代码的问题不仅是在我打开另一个代码的情况下也不会关闭,我在在线编辑器中测试了该代码是否正常工作,但在我的Web应用程序中却无法正常工作不知道为什么。



.panel-heading [data-toggle="collapse"]:after {
  font-family: 'Glyphicons Halflings';
  content: "\e072";
  float: right;
  color: #183F66;
  font-size: 18px;
  line-height: 22px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container col-sm-10">
  <div class="panel-group" id="accordion">
      <div class="panel panel-default">
          <div class="panel-heading">
              <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Abstract
                  </a>
              </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                  ...
              </div>
          </div>
      </div> <!-- .panel -->

      <div class="panel panel-default">
          <div class="panel-heading">
              <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                      Student Group
                  </a>
              </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">
                  ...
              </div>
          </div>
      </div> <!-- .panel -->

      <div class="panel panel-default">
          <div class="panel-heading">
              <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                      Contact with students
                  </a>
              </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">
                  ...
              </div>
          </div>
      </div> <!-- .panel -->
  </div> <!-- .panel-group -->
</div> <!-- .container -->

最佳答案

我发现了问题的发生,因为我首先在布局页面中添加了引导程序库和Java脚本两次,然后在删除此行时在此页面中添加了第二个脚本,它工作正常。



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

关于html - 可折叠的打开/关闭div未关闭,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48613454/

10-12 12:41
查看更多