引导手风琴 - 如果单击打开面板，请不要折叠答案

【问题标题】：bootstrap accordion - don't collapse if clicking on open panel引导手风琴 - 如果单击打开面板，请不要折叠
【发布时间】：2017-09-21 09:59:49
【问题描述】：

我已设置引导程序以在打开新面板时隐藏当前打开的面板：

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

我想扩展此功能，以便在您单击当前打开的面板时不会发生任何事情，即打开的面板在单击时应该保持打开状态。只有在单击其他折叠面板时它才会折叠。

我是这样尝试的，但它不起作用：

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

这有可能吗？

JSFiddle

【问题讨论】：

你能发布一个完整的工作示例吗？ HTML也是。
我编辑了我最初的帖子并添加了一个指向 JSFiddle 上的工作示例的链接。

标签： twitter-bootstrap collapse

【解决方案1】：

Bootstrap 将“in”类添加到打开面板，您可以使用它来检测面板是否已打开，如果是这样，您可以通过调用 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

【讨论】：

不幸的是，这也不起作用。我在最初的帖子中添加了指向 JSFiddle 的链接，因此您可以查看它。
添加 JSFiddle 很有帮助。修改后的答案
谢谢！您的示例有效，但 e.stopPropagation() 导致浏览器跳转到我正在处理的网站上的目标元素。我通过将 e.stopPropagation() 更改为返回 false 来修复它；。
你可以添加 e.preventDefault();以及避免这种情况。更新了答案

【解决方案2】：

根据@Sammy 的回答 - 对于 Bootstrap 4.x，您必须更改

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

到

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

【讨论】：