我实现了悬停功能，同时保持'点击'相当容易：

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

我已经在使用data-attributes了，所以我保留了它们，并在这里使用它们来触发正确的div。“pointer”是我的toggle链接上的一个类，所以你可以根据需要修改它。

你可以直接从插件脚本中复制可折叠的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)
    })
})

这是插件上的数据API块的直接副本，我只是用mouseenter和collapse选项替换了click事件，并将其改为show。
演示：http://jsfiddle.net/um2q2/1/

1.添加以下脚本

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

1.将hoverExpand（或者你想叫它的任何名称）添加到元素中。

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

为了让它为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);
    })
});

I'm a bit late to the party, but for future googlers, I came up with a much simpler way of doing this.
It's coffee script I'm afraid, but you should get the idea:

$(".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

The rest of the code is setting up the variables - you might need to tweak this depending how you've set it up - and the last bit checks that the panel isn't already open before triggering the click again. Again - this works for my set up, but you can remove it if doesn't work for you.

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

$('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编码，但是我在使用一个命名函数时遇到了hover事件onload。也许有人能对此提出建议？

这是在鼠标悬停时完成此操作的最简单方法。

脚本

$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-mouseover更改为ng-click，使其在单击时工作，而不是在鼠标悬停时工作