添加动画到bootstrap手风琴，同时保持正确的加减号

Question

我看到其他样品几乎没有问题，当您在手风琴上双击或快速点击两次时，面板将会展开，但加号和减号将返回加号而不是减号。例如，此链接：https://jsfiddle.net/esedic/mhu8rj3e/

实际问题

无论如何我的加号减号不会发生，但我没有动画/过渡。如何使用下面的代码片段为我的bootstrap手风琴添加动画/过渡？您注意到该框扩展得太快。

＆＃13;

＆＃13;

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle(100);
});

＆＃13;

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在slideToggle()

上使用#filter-body

您还可以在该方法中添加持续时间

＆＃13;

＆＃13;

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle();
});

＆＃13;

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以从共享链接复制行为。您只需将所有属性添加到按钮即可。不需要切换类，因为默认情况下bootstrap会添加它。

请参阅下面的代码段

＆＃13;

＆＃13;

$("#filter-button").click(function() {
  $(this).toggleClass("active");

});

＆＃13;

button.accordion {
  background-color: #d7f2bc;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #addf7f;
}

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size: 22px;
}

button.accordion.active:after {
  content: "\2212";
}

.accordion-panel {
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-bottom: 20px;
  border: 1px solid #addf80;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.filter-box {
  border-radius: 0;
}

#filter-body {
  border: 1px solid #addf80;
  padding: 10px 0;
  transition: 0.2s ease-out;
  width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">

  <button class="accordion collapsed" id="filter-button" href="#filter-body" data-toggle="collapse" data-parent="#accordion" aria-expanded="true">Filter</button>

  <div id="filter-body" class="panel-collapse collapse" role="tabpanel">
    <div class="panel-body filter-body">
      <div class="col-lg-3">
        <div class="filter-group">
          <label for="datefrom">Date From</label>
          <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly" />
        </div>
      </div>
      <div class="col-lg-3">
        <div class="filter-group">
          <label for="dateto">Date To</label>
          <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly" />
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果要在加号/减号上添加一些动画，可以使用transition。将::after复制为::before并将其与transform一起旋转。

＆＃13;

＆＃13;

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle();
});

＆＃13;

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\2212';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

button.accordion:before {
    content: '\2212';
    color: #777;
    font-weight: bold;
    font-size: 22px;
    position: absolute;
    right: 18px;
    transform: rotate(0deg);
    transition: .3s all ease;
}

button.accordion.active:before {
    content: "\2212";
    transform: rotate(90deg);
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle(100);
});

＆＃13;

button.accordion {
    background-color: #d7f2bc;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #addf7f;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
	font-size: 22px;
}

button.accordion.active:after {
    content: "\2212";
}

.accordion-panel {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #addf80;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.filter-box {
	border-radius: 0;
}

.filter-body {
	border: 1px solid #addf80;
	padding: 10px 0;
	transition: height 0.2s ease-out;
	width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="panel-group filter-box transition" id="accordion">
							
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter</button>

<div id="filter-body" class="panel-collapse collapse">
  <div class="panel-body filter-body">
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="datefrom">Date From</label>
        <input id="datefrom" name="datefrom" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="filter-group">
        <label for="dateto">Date To</label>
        <input id="dateto" name="dateto" type="text" class="datetimepicker" readonly="readonly"/>
      </div>
    </div>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;