首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >带延迟弹出菜单的Bootstrap 3导航栏链接

带延迟弹出菜单的Bootstrap 3导航栏链接
EN

Stack Overflow用户
提问于 2018-05-31 05:42:34
回答 2查看 48关注 0票数 0

我正在尝试有一个带有延迟弹出菜单的导航栏链接。我不想使用普通的下拉菜单,因为我希望用户能够点击主链接,但如果他们悬停说1秒,那么弹出菜单将显示。

我已经创建了一个代码笔,但它不能正常工作。

在我的代码笔中,我在导航栏中创建了一个名为“job”的链接,如果用户单击此链接,则他们应该导航到定义了href的位置。

但如果它们悬停在屏幕上,则会显示一个菜单。在我的代码笔中,我使用javascript使菜单悬停。但当用户单击页面上的其他位置时,菜单不会消失。

https://codepen.io/iisfaq/pen/RJNJGN

代码语言:javascript
复制
  $('#btnJobs').hover(function (e) {
            //   e.stopPropagation();

            window.setTimeout(function () {

                $('#btnJobs').dropdown('toggle');
            }, 800);
        });

而且,一旦弹出窗口显示出来,链接就不再起作用了。

EN

回答 2

Stack Overflow用户

发布于 2018-05-31 05:58:48

您可以创建一段等待时间,然后再执行某些操作,例如:

代码语言:javascript
复制
$('#btnJobs').hover(function (e) {
  //   e.stopPropagation();

  var start = new Date().getTime() + 800;
  while (new Date().getTime() < start) {
    //wait
  }

  //After
  $('#btnJobs').dropdown('toggle');
});
票数 0
EN

Stack Overflow用户

发布于 2018-05-31 15:02:45

请参考下面的小提琴。

在unHover上,你想要隐藏下拉菜单,然后用下面的代码替换你的代码。

Fiddle

代码语言:javascript
复制
$(function(){
    $('#btnJobs').hover(function(){
            window.setTimeout(function () {
            $('#btnJobs').dropdown('toggle');
        }, 800);
    }, function(){
        $('#btnJobs').parent().removeClass('open');
    });
});

对于外部单击

代码语言:javascript
复制
$('#btnJobs').hover(function(){
           window.setTimeout(function () {
              $('#btnJobs').dropdown('toggle');
           }, 800);
     }

    $(document).click(function(){
         if($('#btnJobs').parent().hasClass('open')){
             $('#btnJobs').parent().removeClass('open');
         }
    })
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50613738

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档