Question

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

我已经创建了一个代码笔，但它无法正常工作。

在我的代码笔中，我在导航栏中创建了一个名为“jobs”的链接，如果用户点击它，那么他们应该导航到定义的href。

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

  $('#btnJobs').hover(function (e) {
            //   e.stopPropagation();

            window.setTimeout(function () {

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

一旦弹出窗口也显示链接不再有效。

Answer 1

你可以创造一段时间等待做某事，比如：

$('#btnJobs').hover(function (e) {
  //   e.stopPropagation();

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

  //After
  $('#btnJobs').dropdown('toggle');
});

Answer 2

请参阅以下小提琴。

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

Fiddle

$(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');
         }
    })

具有延迟弹出菜单的Bootstrap 3导航栏链接

2 个答案: