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

Question

我找到了几种方法来在bootstrap中公开可折叠的手风琴功能，但是我无法以悬停panel-collapse元素时只触发一个div.panel-heading > a的方式对其进行自定义。 / p>

我正在做以下事情：

$('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');
 });