Bootstrap中Hover的开放式崩溃标签
Bootstrap中Hover的开放式崩溃标签
提问于 2015-08-28 13:25:40
我有崩溃面板在启动，这是打开在标签的标题上的一个点击。我试图弄清楚，使用鼠标悬停在总宽度的选项卡，但我没有得到它。下面是默认关闭的单个选项卡的代码。
<div class="panel panel-default" style="background-color:#039;">
<div class="panel-heading" style="background-color:#039;">
<a class="nodecoration panel-title lead" data-toggle="collapse" data-parent="#panel-814345" href="#panel-element-566205">Software Development</a>
</div>
<div id="panel-element-566205" class="panel-collapse collapse" style="background-color:#039; color:#fff;">
<div class="panel-body" style="border:none; font-size:14px; padding-bottom:0; margin-bottom:0;">
We work for almost all web based application, database-driven systems, mapping and geo-spatial applications, and large content managed websites
<br /><br /><p style="font-style:italic; font-weight:700;">Find out more</p>
</div>
</div>
</div>如果我们将css类从class="panel-collapse collapse"更改为class="panel-collapse collapse in"，则选项卡是打开的。你能告诉我如何做到这一点吗？
我得到了答案，但只能在标题上盘旋，而不是在TAB的总宽度上工作。代码在以下
$(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]+$)/, '')
,
option = $(target).hasClass('in') ? 'hide' : "show";
$('.panel-collapse').not(target).collapse("hide");
$(target).collapse(option);
})
});我们能让它在全宽度上悬停工作吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-28 21:43:06
您可以使用hover函数来实现这一点。
$(".panel-heading").hover(
function() {
$('.panel-collapse').collapse('show');
}, function() {
$('.panel-collapse').collapse('hide');
}
);但一旦鼠标离开标题标题，它就会关闭面板。
摆弄悬停
交替解是mouseenter函数
$(".panel-heading").mouseenter(function () {
$(".panel-collapse").fadeIn();
});
$(".panel-collapse").mouseleave(function(){
$(".panel-collapse").fadeOut();
});这样，只有当鼠标离开面板体时，面板才关闭。
拨弄鼠标
Stack Overflow用户
发布于 2015-08-28 13:36:20
您也可以将js、悬浮事件和折叠自举法合并为事件。如果我正确理解了你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32272168
复制相关文章
相似问题
腾讯云开发者
