我在我正在处理的项目中使用 Twitter 的 Bootstrap 'Collapse' 插件。我有一个简单的手风琴（根据文档进行设置），但我想将默认功能从点击修改为悬停事件。
谁能确认实现这一目标的最佳方法？
问问题
24951 次
7 回答
10
我实现了悬停功能，同时相当容易地保持“可点击性”：
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。“指针”是我的切换链接上的一个类，因此您可以根据需要对其进行调整。
于 2012-11-21T13:18:29.180 回答
9
您可以直接从插件脚本中复制可折叠的 data-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/
于 2012-05-23T13:47:45.877 回答
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);
})
});
于 2014-09-17T13:03:39.420 回答
4
添加以下脚本
$( ".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>
于 2014-07-25T01:05:17.070 回答
2
根据 Cliff Seal 的回答，我建议排队动画以防止在动画完成之前发生时panel-collapse保持打开状态。mouseleavecollapse('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也许有人可以就此提出建议？
于 2014-05-01T11:12:09.967 回答
2
我参加聚会有点晚了，但对于未来的谷歌人来说，我想出了一个更简单的方法来做这件事。
恐怕这是咖啡脚本，但你应该明白：
$(".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
其余的代码是设置变量——你可能需要根据你的设置方式来调整它——最后一点在再次触发点击之前检查面板是否已经打开。再次 - 这适用于我的设置，但如果不适合您，您可以将其删除。
于 2013-05-23T10:12:51.460 回答
0
这是在鼠标悬停时完成此操作的最简单方法。在 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-click 更改 ng-mouseover 以使其在单击而不是 mouseover 时工作
于 2016-04-28T08:13:49.213 回答