如何使用js，html和css调整此代码以获得默认的折叠视图？

Question

这是完整的代码，它有js，css和html。我从一个在线片段得到了这个，我对Javascript不满意。请帮忙！！！

我在我的主页上提出这个问题并占用空间，将它全部折叠会很棒。

＆＃13;

＆＃13;

$(document).on('click', '.panel-heading span.clickable', function(e) {
  var $this = $(this);
  if (!$this.hasClass('panel-collapsed')) {
    $this.closest('.panel').find('.panel-body').slideUp();
    $this.addClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
  } else {
    $this.closest('.panel').find('.panel-body').slideDown();
    $this.removeClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
  }
})

＆＃13;

.row {
  margin-top: 40px;
  padding: 0 10px;
}
.clickable {
  cursor: pointer;
}
.panel-heading span {
  margin-top: -20px;
  font-size: 15px;
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 1</h3>
          <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
        </div>
        <div class="panel-body">Panel content</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 2</h3>
          <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
        </div>
        <div class="panel-body">Panel content</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 3</h3>
          <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
        </div>
        <div class="panel-body">Panel content</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-warning">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 4</h3>
          <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
        </div>
        <div class="panel-body">Panel content</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 在您的css中添加此内容：.closeThisPanel{ display:none; }

2. 将closeThisPanel课程添加到panel-body div。

3. 在panel-collapsed范围内添加clickable类。

4. 将图标从glyphicon glyphicon-chevron-up更改为glyphicon glyphicon-chevron-down

＆＃13;
＆＃13;
$(document).on('click', '.panel-heading span.clickable', function(e) {
  var $this = $(this);
  if (!$this.hasClass('panel-collapsed')) {
    $this.closest('.panel').find('.panel-body').slideUp();
    $this.addClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
  } else {
    $this.closest('.panel').find('.panel-body').slideDown();
    $this.removeClass('panel-collapsed');
    $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
  }
})
＆＃13;
.row {
  margin-top: 40px;
  padding: 0 10px;
}
.clickable {
  cursor: pointer;
}
.panel-heading span {
  margin-top: -20px;
  font-size: 15px;
}

.closeThisPanel{
  display:none;
}
＆＃13;
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-success">
        <div class="panel-heading">
          <h3 class="panel-title">Panel 2</h3>
          <span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
        </div>
        <div class="panel-body closeThisPanel">Panel content</div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;