我在 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>
如果我们改变 css 类class="panel-collapse collapse"
to class="panel-collapse collapse in"
然后选项卡打开。您能否让我知道如何实现这一目标。
我得到了答案,但只能将鼠标悬停在标题上而不是选项卡的总宽度上。代码如下
$(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);
})
});
我们可以通过将鼠标悬停在全宽上来使其工作吗?