Нажмите снаружи, чтобы закрыть раскрывающийся список работает только при нажатии снаружи <nav> - PullRequest
Новая
       5

Нажмите снаружи, чтобы закрыть раскрывающийся список работает только при нажатии снаружи <nav>

0 голосов
/ 23 мая 2018

Следующая навигация, которую я создаю, работает очень хорошо, однако я заметил, что при нажатии за пределами кнопок навигации, но все еще внутри контейнера <nav> раскрывающийся список не закрывается, как это должно быть, однако он закрывается при щелчке снаружи <nav>.Как это может быть?Спасибо за вашу помощь.

См. Демонстрацию здесь

JQuery 

$(document).ready(function() {
  $(".click").on("click", function(e) {
    var menu = $(this);
    toggleDropDown(menu);
  });

  $(document).on('mouseup',function(e) {
    var container = $("nav");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
        $(".main-container").removeClass("black-bg");
        if ($('a.active').hasClass('active')) {
          $('a.active').removeClass('active');
        }
      });
    }
  });

});


function toggleDropDown(menu) {
  var isActive = $('a.active').length;
  $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
    $(".main-container").removeClass("black-bg");
    if (menu.hasClass('active')) {
      menu.removeClass('active');
    } else {
      $('a.active').removeClass('active');
      menu.addClass('active');
      menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
        $(".main-container").addClass("black-bg");
      });
    }
  });
  if (!isActive) {
    menu.addClass('active');
    menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
      $(".main-container").addClass("black-bg");
    });
  }
}

1 Ответ

0 голосов
/ 23 мая 2018

Вы должны изменить свой контейнер, что-то вроде: 

var container = $("nav .top-bar-section ul");
...