javascript - Bootstrap Accordion 切换逻辑

Question

我有一个 bootstrap Accordion ，在 Accordion 标题上我有两个 div。当 Accordion 关闭时，一个 div 显示(visiable1)。另一个显示 Accordion 何时打开(visiable2)。请参阅FIDDLE

但问题是当我打开 Accordion 并再次关闭时，出现相同的 Accordion visible2 div而不是visible1。我不确定我犯了什么错误。我的鬃毛目标是当 Accordion 关闭时应显示visible1，当 Accordion 打开时应显示visible2。任何帮助将不胜感激。

JS

$('body').on('click', '.list-bar', function() {

  $(".visiable1").slideDown("fast");
  $(".visiable2").slideUp("fast");

  $(this).children(".visiable1").slideUp();
  $(this).children(".visiable2").slideDown();


 });     

Answer 1

Hook Bootstrap panel's collapse event :

$(document).on('hidden.bs.collapse shown.bs.collapse', '.panel', function () {
    $(this).find('.visiable1, .visiable2').slideToggle('fast');
});