Bootstrap 在悬停时折叠手风琴

Posted 2023-03-24

【中文标题】Bootstrap 在悬停时折叠手风琴

【英文标题】：Bootstrap Collapse accordion on hover

【发布时间】：2012-05-30 00:00:56

【问题描述】：

我正在一个项目中使用 Twitter 的 Bootstrap 'Collapse' 插件。我有一个简单的手风琴（设置 as per the documentation），但我想将默认功能从 on click 修改为 on hover 事件。

谁能确认实现这一目标的最佳方法？

【参考方案1】：

我在保持“可点击性”的同时相当轻松地实现了悬停功能：

jQuery(".pointer").hover(
    function()
        var thisdiv = jQuery(this).attr("data-target")
        jQuery(thisdiv).collapse("show");
    ,
    function()
        var thisdiv = jQuery(this).attr("data-target")
        jQuery(thisdiv).collapse("hide");
    
);

我已经在使用数据属性，所以我保留了它们，并在这里使用它们来触发正确的 div。 “指针”是我的切换链接上的一个类，因此您可以根据需要对其进行调整。

【参考方案2】：

您可以直接从插件脚本中复制可折叠的 data-api 并对其进行调整以实现悬停功能。然后，您可以将其放置在您自己的 script.js 文件中，并将您想要修改的可折叠文件定位为在悬停而不是单击时打开。试试这个例子：

JS

$(function() 
    $('#accordion2').on('mouseenter.collapse.data-api', '[data-toggle=collapse]', function(e) 
        var $this = $(this),
            href, target = $this.attr('data-target') || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
            ,
            option = $(target).data('collapse') ? 'show' : $this.data()
            $(target).collapse(option)
    )
)

这是插件上找到的 data-api 块的直接副本，我只是将 click 事件替换为 mouseenter 和 collapse 选项，将其更改为 show。

演示：http://jsfiddle.net/um2q2/1/

【讨论】：

这有点奇怪，在手风琴关闭后立即再次弹出打开的手风琴，即使我将鼠标悬停在不同的手风琴头上。

只有在此选项卡在悬停时未打开后打开和关闭时才第一次工作。

【参考方案3】：

添加以下脚本

$( ".hoverExpand" ).hover(
    function() 
        if (! $(this).hasClass('collapsing') && 
            $(this).hasClass('collapsed')) 
                $( this ).click();
        
    , function() 
        if  (! $(this).hasClass('collapsing') || 
             ! $(this).hasClass('collapsed')) 
                $( this ).click();
        
    
);

将hoverExpand（或任何您想调用的名称）添加到元素中。请参阅下面的示例

<a class="hoverExpand" data-toggle="collapse" data-parent="#accordion" 
   href="#collapseOne">A plane that flies below water</a>

【讨论】：

但是，我不想手动或通过脚本单击该元素。点击它应该会打开一个新页面

【参考方案4】：

为了让它适用于 bootstrap3，我做了一些更改

$(function() 
    $(document).on('mouseenter.collapse', '[data-toggle=collapse]', function(e) 
        var $this = $(this),
            href, 
            target = $this.attr('data-target') 
                     || e.preventDefault() 
                     || (href = $this.attr('href')) 
                     && href.replace(/.*(?=#[^\s]+$)/, ''), //strip for ie7
            option = $(target).hasClass('in') ? 'hide' : "show"

            $('.panel-collapse').not(target).collapse("hide")
            $(target).collapse(option);
    )
);

【讨论】：

我认为命名空间是多余的，没有命名空间的 mouseenter 用于折叠。

【参考方案5】：

我参加聚会有点晚了，但对于未来的谷歌人来说，我想出了一个更简单的方法。

恐怕这是咖啡脚本，但你应该明白：

$(".your-hoverable-object-class").mouseenter (e) ->
$this = $(this)
link = $this.find("a") #(assumes you only have one link)
target = link.attr('data-target') || e.preventDefault() || (href = link.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') #strip for ie7
unless $(target).hasClass('in')
  link.trigger('click') #Here's the money shot - just trigger the default functionality

其余代码用于设置变量 - 您可能需要根据设置方式进行调整 - 最后一点会在再次触发点击之前检查面板是否尚未打开。同样 - 这适用于我的设置，但如果不适合您，您可以将其删除。

【参考方案6】：

根据 Cliff Seal 的回答，我建议排队动画以防止 panel-collapse 在 mouseleave 在 collapse('show') 动画完成之前发生时保持打开状态。

$('div.panel-collapse').on('shown.bs.collapse hidden.bs.collapse', function() 
  $(this).dequeue('collapse');
);
$('div.panel-heading').hover(
  function() 
    var collapse = $($(this).find('a').attr('href'));
    collapse.queue('collapse', function() 
      $(this).collapse('show');
    );
    if (!collapse.hasClass('collapsing')) 
      collapse.dequeue('collapse');
    
  ,
  function() 
    var collapse = $($(this).find('a').attr('href'));
    collapse.queue('collapse', function() 
      $(this).collapse('hide');
    );
    if (!collapse.hasClass('collapsing')) 
      collapse.dequeue('collapse');
    
  

这并没有使用 DRY 编码，但是我在使用命名函数时遇到了hoverevents onload。也许有人可以就此提出建议？

【参考方案7】：

这是在鼠标悬停时完成此操作的最简单方法。在 angularJs 中使用纯 javascript。

脚本

$scope.collapsePanel = function(variable) 
    if(document.getElementById(variable).className=="collapse in") 
        document.getElementById(variable).className="collapse";
        document.getElementById(variable).setAttribute("aria-expanded","false");
         else 
            document.getElementById(variable).className="collapse in";  
            document.getElementById(variable).setAttribute("aria-expanded","true");
        

html 代码

<div ng-repeat="entity in entities">
<div class="panel-heading" ng-mouseover="collapsePanel(entity)">
     //Give your contents here
</div> 
</div>

注意：使用 ng-click 更改 ng-mouseover 以使其在单击而不是鼠标悬停时工作