Question

我使用以下命令设置bootstrap以隐藏当前打开的面板：

$('.collapse').on('show.bs.collapse', function () {
   $('.in').collapse('hide');
});

我想对此进行扩展，以便在您单击当前打开的面板时没有任何反应，即打开的面板在单击时应保持打开状态。它只应在单击其他折叠面板时折叠。

我试过这样，但它不起作用：

$('.collapse').on('show.bs.collapse', function () {
  $('.in').not(this).collapse('hide');
});

这有可能吗？

JSFiddle

Answer 1

Bootstrap在＆＃39;中添加了课程＆＃39;要打开面板，您可以使用它来检测面板已经打开的天气，如果是这样，那么您可以通过调用event.stopPropagation()来跳过折叠，您可以阅读有关stopPropagation here的更多信息。

$('.panel-title > a[data-toggle="collapse"]').click(function(e){
  target = $(this).attr('href')
  if ($(target).hasClass('in')) {
    e.preventDefault(); // to stop the page jump to the anchor target.
    e.stopPropagation()
  }
})

jsfiddle

Answer 2

根据@Sammy答案-对于Bootstrap 4.x，您必须进行更改

    if ($(target).hasClass('in'))

到

    if ($(target).hasClass('show'))

bootstrap手风琴 - 如果点击打开的面板，请不要塌陷

2 个答案: