Bootstrap 在悬停时折叠手风琴

Question

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

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

Answer 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。 “指针”是我的切换链接上的一个类，因此您可以根据需要对其进行调整。

Answer 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/

Answer 3

1. 添加以下脚本

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

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

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

Answer 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);
    })
});

Answer 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

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

Answer 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。也许有人可以就此提出建议？

Answer 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 以使其在单击而不是鼠标悬停时工作