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

Posted 2023-03-24

【中文标题】Bootstrap 4 在悬停时可折叠多个项目

【英文标题】：Bootstrap 4 collapsible on hover with multiple items

【发布时间】：2016-08-11 19:55:58

【问题描述】：

我已经找到了几种在引导程序中公开可折叠手风琴功能的方法，但是我无法自定义它，以便在悬停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/

【问题讨论】：

能不能写出整个面板的html结构？

问题是这个代码 $('.panel-collapse') 会影响类 panel-collapse 的每一项。解决方案是设置要更改可见性的项目的父项。

有没有通用的方法？即触发实际的原始引导功能？见我上面的小提琴。

【参考方案1】：

试试这个代码：

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