Bootstrap Collapse手风琴悬停

Question

我在我正在开发的项目中使用Twitter的Bootstrap'Collapse'插件.我有一个简单的手风琴(根据文档设置),但我想修改从点击到悬停事件的默认功能.

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

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选项,show而将选项更改为.

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