Bootstrap折叠手风琴在悬停时 [英] Bootstrap Collapse accordion on hover

问题描述

我正在我正在研究的项目中使用Twitter的Bootstrap折叠插件。我有一个简单的手风琴（根据文档设置 ），但是我想将默认功能从点击更改为悬停事件。

I'm using Twitter's Bootstrap 'Collapse' plug-in in a project I am working on. I have a simple accordion (setup as per the documentation), but I want to amend the default functionality from on click to the on hover event.

任何人都可以确认实现此目标的最佳方法

Can anyone confirm the best way to achieve this?

推荐答案

您可以直接从插件脚本复制可折叠的data-api，并对其进行调整以实现悬停功能。然后，您可以将其放置在自己的script.js文件中，并将要修改的可折叠对象定位为悬停而不是单击时打开。请尝试以下示例：

You can copy the collapsible data-api straight from the plugins script and tweak it around to achieve the hover functionality. You can then place it inside your own script.js file and target the collapsible you want modified to open on hover instead of on click. Try this for example:

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 选项，将其更改为显示。

This is a direct copy of the data-api block found on the plugin, i just replaced the click event with mouseenter and also the collapse option, changed it to show instead.

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

这篇关于Bootstrap折叠手风琴在悬停时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！