Question

我有一个bootstrap手风琴，在手风琴标题上我有两个div。当手风琴音乐关闭时，一个div显示（visiable1）。另一个显示手风琴何时打开（可见2）。请参阅 FIDDLE

但问题是当我打开手风琴并再次关闭相同的手风琴时，visible2 div出现而不是visible1。我不确定我做了什么错。我的鬃毛目标是当手风琴关闭时它应该显示可见1并且当手风琴打开时应显示可见2。任何帮助将不胜感激。

JS

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

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

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


 });

Answer 1

挂钩Bootstrap panel's collapse event：

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

Answer 2

您遇到的问题是，当点击每个标题时，您不知道该项目是否已切换为打开或关闭。

目前，只要点击一个标题，你就会导致visiable2向下滑动，这将使visiable2成为一个无论如何都可以显示的。

您可以解决此问题的一种方法是向当前打开的元素添加一个类，并将其用作确定是否应显示或隐藏标签的方法。

Bootstrap手风琴切换逻辑

2 个答案: