Bootstrap 4 在悬停时可折叠多个项目

Question

我已经找到了几种在引导程序中公开可折叠手风琴功能的方法，但是我无法自定义它，以便在悬停div.panel-heading > a 元素时只触发一个panel-collapse。

我正在做以下事情：

$('div.panel-heading a').hover(function () {
   $('.panel-collapse').collapse('show');
 }, function() {
   $('.panel-collapse').collapse('hide');
 });

}

但每当我将鼠标悬停在a 元素上时，所有panel-collapse 元素都会打开和关闭。如果他们不是panel-heading 的孩子，我该如何隔离他们？

在这里提琴：http://jsfiddle.net/Tupira/084z33g5/1/

Answer 1

试试这个代码：

$('div.panel-heading a').hover(function () {
   $('.panel-collapse', $(this).closest('.panel')).collapse('show');
 }, function() {
   $('.panel-collapse', $(this).closest('.panel')).collapse('hide');
 });