Javascript 在引导中悬停时打开折叠选项卡
我有一个折叠面板在引导,这是打开一个点击标签的标题。我试图找出打开使用鼠标悬停在标签的总宽度,但我没有得到它。下面是默认关闭的单个选项卡的代码Javascript 在引导中悬停时打开折叠选项卡,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,我有一个折叠面板在引导,这是打开一个点击标签的标题。我试图找出打开使用鼠标悬停在标签的总宽度,但我没有得到它。下面是默认关闭的单个选项卡的代码 <div class="panel panel-default" style="background-color:#039;"> <div class="panel-heading" style="background-color:#039;"> <a class="nodecoration p
<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>
我们能把鼠标悬停在全宽上吗 您也可以将js hover事件和as事件组合在一起。
如果我正确理解了您的问题。您可以使用
悬停功能来实现这一点
$(".panel-heading").hover(
function() {
$('.panel-collapse').collapse('show');
}, function() {
$('.panel-collapse').collapse('hide');
}
);
$(".panel-heading").mouseenter(function () {
$(".panel-collapse").fadeIn();
});
$(".panel-collapse").mouseleave(function(){
$(".panel-collapse").fadeOut();
});
但一旦鼠标离开标题标题,它就会关闭面板
另一种解决方案是mouseenter
函数
$(".panel-heading").hover(
function() {
$('.panel-collapse').collapse('show');
}, function() {
$('.panel-collapse').collapse('hide');
}
);
$(".panel-heading").mouseenter(function () {
$(".panel-collapse").fadeIn();
});
$(".panel-collapse").mouseleave(function(){
$(".panel-collapse").fadeOut();
});
这样,面板仅在鼠标离开面板主体时关闭
答案应该会让您走上正确的轨道。如果选项卡打开,则在鼠标悬停后,您希望它保持打开状态,或者仅保持打开状态,直到鼠标移到选项卡上,并且一旦鼠标离开选项卡区域,它就会自动关闭?您好,shehary,是的,我希望它只打开,直到鼠标移到选项卡上。。请让我知道..@WebDesigner如果您使用带有姓名的@标志,我会立即得到通知,但很晚才看到您的消息,任何方式都会发布答案,并提供两种可能的解决方案。@Shehary,非常感谢您的建议。我会再做一次这样的事…这太完美了。感谢您花时间编写代码。