Question

我在我正在开发的项目中使用Twitter的Bootstrap'Collapse'插件。我有一个简单的手风琴（设置as per the documentation），但我想修改默认功能，从点击到悬停事件。

任何人都可以确认实现这一目标的最佳方式吗？

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

您可以直接从插件脚本复制可折叠数据-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选项，将其更改为{{ 1}}而不是。

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

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

我参加派对有点晚了，但对于未来的googlers，我想出了一个更简单的方法。

这是咖啡剧本我很害怕，但你应该明白这个想法：

$(".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编码，但在使用命名函数时遇到了hover个事件onload。也许有人可以就此提出建议？

Answer 7

这是在mouseover上完成此操作的最简单方法。在angularJs中使用普通的javascript。

脚本

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

HTML代码

passphrase

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

Bootstrap Collapse手风琴悬停

7 个答案: