带延迟弹出菜单的Bootstrap 3导航栏链接
带延迟弹出菜单的Bootstrap 3导航栏链接
提问于 2018-05-31 05:42:34
我正在尝试有一个带有延迟弹出菜单的导航栏链接。我不想使用普通的下拉菜单，因为我希望用户能够点击主链接，但如果他们悬停说1秒，那么弹出菜单将显示。
我已经创建了一个代码笔，但它不能正常工作。
在我的代码笔中，我在导航栏中创建了一个名为“job”的链接，如果用户单击此链接，则他们应该导航到定义了href的位置。
但如果它们悬停在屏幕上，则会显示一个菜单。在我的代码笔中，我使用javascript使菜单悬停。但当用户单击页面上的其他位置时，菜单不会消失。
https://codepen.io/iisfaq/pen/RJNJGN
$('#btnJobs').hover(function (e) {
// e.stopPropagation();
window.setTimeout(function () {
$('#btnJobs').dropdown('toggle');
}, 800);
});而且，一旦弹出窗口显示出来，链接就不再起作用了。
回答 2
Stack Overflow用户
发布于 2018-05-31 05:58:48
您可以创建一段等待时间，然后再执行某些操作，例如：
$('#btnJobs').hover(function (e) {
// e.stopPropagation();
var start = new Date().getTime() + 800;
while (new Date().getTime() < start) {
//wait
}
//After
$('#btnJobs').dropdown('toggle');
});Stack Overflow用户
发布于 2018-05-31 15:02:45
请参考下面的小提琴。
在unHover上，你想要隐藏下拉菜单，然后用下面的代码替换你的代码。
$(function(){
$('#btnJobs').hover(function(){
window.setTimeout(function () {
$('#btnJobs').dropdown('toggle');
}, 800);
}, function(){
$('#btnJobs').parent().removeClass('open');
});
});对于外部单击
$('#btnJobs').hover(function(){
window.setTimeout(function () {
$('#btnJobs').dropdown('toggle');
}, 800);
}
$(document).click(function(){
if($('#btnJobs').parent().hasClass('open')){
$('#btnJobs').parent().removeClass('open');
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50613738
复制相关文章
相似问题
腾讯云开发者
