悬停引导手风琴折叠(Bootstrap Collapse accordion on hover)

我使用Twitter的引导“崩溃”插件的项目我的工作。我有一个简单的手风琴（设置为每个文件），但我想从点击到悬停事件修改默认功能。

任何人都可以证实，以实现这一目标的最佳方式是什么？

Answer 1:

您可以复制从插件脚本可折叠数据API笔直，围绕调整它实现悬停功能。然后，您可以将它放在自己的script.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块直接拷贝，我刚刚更换的click与事件mouseenter ，也是collapse的选项，将其改为show代替。

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

Answer 2:

我实现悬停功能，同时保留“可点击”相当容易：

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

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:

我有点迟到了，但对于未来的Google，我想出了这样做的更简单的方法。

这是咖啡剧本我很害怕，但你应该得到的想法：

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

基于崖密封的答案，我建议排队动画，以防止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');
    }
  }
}

这没有用干的编码，但我遇到hover事件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-鼠标悬停与NG-点击使其在点击鼠标悬停，而不是工作

文章来源: Bootstrap Collapse accordion on hover