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

问题描述

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

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 选项，改为 show.

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