Bootstrap 3 навигационная ссылка с отложенным всплывающим меню

Question

Я пытаюсь получить навигационную ссылку с отложенным всплывающим меню.Я не хочу использовать обычный выпадающий список, так как я хочу, чтобы пользователь мог щелкнуть по главной ссылке, но если он будет зависать, скажем, в течение 1 секунды, появится меню poup.

Я создал кодперо, но оно не работает правильно.

В моем кодовом пере я создал ссылку в панели навигации, называемую «заданиями», и если пользователь нажимает на нее, он должен перейти к тому, что когда-либо определено.

Но если они зависают, отображается меню.В моем коде пера я использую JavaScript, чтобы меню зависало.Но меню не исчезнет, ​​когда пользователь щелкнет в другом месте на странице.

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

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

            window.setTimeout(function () {

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

Также похоже, что ссылка больше не работает, когда отображается всплывающее окно.

Answer 1

Пожалуйста, см. Ниже Fiddle.

При 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');
         }
    })

Answer 2

вы можете создать время, чтобы подождать, прежде чем что-то сделать, например:

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

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

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