twitter-bootstrap 在 Bootstrap 中的悬停中打开折叠选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32272168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Collapse Tab in Hover in Bootstrap
提问by WebDesigner
I am having Collapse Panel in Bootstrap which is opening on a click on the title of the tab. I am trying to figure out to open using the hover of the mouse on the total width of the tab but I am not getting it. Below is the code of the single tab which is close by default.
我在 Bootstrap 中有折叠面板，它是在单击选项卡标题时打开的。我试图弄清楚使用鼠标悬停在选项卡的总宽度上打开，但我没有得到它。以下是默认关闭的单个选项卡的代码。
<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>
If we change the css class from class="panel-collapse collapse"to class="panel-collapse collapse in"then the tab is open. Could you please let me know how to achieve this.
如果我们将 css 类从 更改为class="panel-collapse collapse"，class="panel-collapse collapse in"则该选项卡将打开。你能否让我知道如何实现这一目标。
I GOT THE ANSWER BUT WORKING ONLY BY HOVER ON THE TITLE NOT ON THE TOTAL WIDTH OF THE TAB. THE CODES ARE BELOW
我得到了答案，但只能通过悬停在标题上而不是在选项卡的总宽度上工作。代码如下
$(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);
})
});
Can we make this to work by hover on the full width ??
我们可以通过将鼠标悬停在全宽上来使其工作吗？
回答by Shehary
You can achieve this with hoverfunction
您可以通过hover功能实现这一点
$(".panel-heading").hover(
function() {
$('.panel-collapse').collapse('show');
}, function() {
$('.panel-collapse').collapse('hide');
}
);
But it will close the panel as soon as mouse leaves the title header
但是一旦鼠标离开标题标题，它就会关闭面板
Alternate solution is mouseenterfunction
替代解决方案是mouseenter函数
$(".panel-heading").mouseenter(function () {
$(".panel-collapse").fadeIn();
});
$(".panel-collapse").mouseleave(function(){
$(".panel-collapse").fadeOut();
});
With this the panel only close when mouse leaves the panel body.
这样面板只有在鼠标离开面板主体时才会关闭。
回答by Alex Kobzin
You can combine js hover event and collapse bootstrap methodsas events too. If i understood your question correctly.
您也可以将 js 悬停事件和折叠引导程序方法组合为事件。如果我正确理解你的问题。
