Bootstrap 4 Accordion鼠标悬停触发功能异常问题求助

嘿，看你的代码，现在的问题是鼠标悬停时所有折叠面板都一起展开了对吧？这是因为你用了全局选择器选中了所有.card下的.collapse元素，所以触发事件时会一次性把所有面板都打开。

我们只需要调整选择器的范围，精准定位到当前鼠标悬停的按钮对应的面板就行，修改后的代码如下：

$('.accordion .card-header button').on('mouseenter', function(event) {
  event.preventDefault();
  // 定位到当前按钮所在的卡片容器，再找到对应的折叠面板展开
  $(this).closest('.card').find('.collapse').collapse('show');
});

如果还需要鼠标移开后自动折叠面板，可以再加一个mouseleave事件：

$('.accordion .card-header button').on('mouseleave', function(event) {
  event.preventDefault();
  $(this).closest('.card').find('.collapse').collapse('hide');
});

简单解释下逻辑：

• $(this)指代当前触发mouseenter事件的那个按钮元素
• closest('.card')会向上查找最近的.card父容器，这样就锁定了当前按钮所属的面板
• 再用find('.collapse')找到这个容器里的折叠面板，最后调用collapse('show')就只会展开当前面板啦～

内容的提问来源于stack exchange，提问作者Owaiz Yusufi