Bootstrap4 折叠切换

Question

我正在尝试在单击时设置折叠切换的样式，并希望在显示折叠时有一个切换类。但是bootstrap4中的实际逻辑，例如：

<button data-toggle="collapse">Button</button> <div class="collapse">Collapse Content</div>

1. 第一次点击，会显示折叠，按钮类名不会改变。
2. 再次点击，一个新的类名collapsed添加到按钮切换中。
3. 再次点击，类名collapsed将从按钮切换中移除。

如何在显示折叠内容时将样式按钮切换为不同的样式？

Answer 1

http://getbootstrap.com/docs/4.1/components/collapse/

$(document).ready(function(){

$('#collapseExample').on('hide.bs.collapse', function () {
   $('#myBtn').removeClass('btn-success');
   $('#myBtn').addClass('btn-primary');
});

$('#collapseExample').on('show.bs.collapse	', function () {
   $('#myBtn').removeClass('btn-primary');
   $('#myBtn').addClass('btn-success');
})

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


 <button id="myBtn" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button 
  </button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>