Расширенное меню Superfish не закрывается при нажатии снаружи - PullRequest
0 голосов
/ 13 сентября 2018

У меня есть это расширенное меню Superfish с разметкой:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="true">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

и:

<div id="navbar-collapse" class="navbar-collapse collapse in" aria-expanded="true" style="">
        <div class="region region-navigation-collapsible">
<section id="block-mainmenu" class="block block-superfish block-superfishmain clearfix">...</section></div></div>

Я хочу закрыть это меню при нажатии за его пределами.

Я пробовал этот код jQuery:

var $menu = $('.menu');
var $button = $('.navbar-toggle');

$button.click(function () {
  $menu.toggle();
});

$(document).mouseup(function (e) {
   if (!$menu.is(e.target) 
   && $menu.has(e.target).length === 0
   && !$button.is(e.target)) 
   {
     $menu.hide();
     $button.addClass("collapsed");
     $button.attr("aria-expanded","false");
     $("#navbar-collapse").attr("aria-expanded","false");
     $("#navbar-collapse").removeClass("in");
  }
 });

, но он работает неправильно.Он закрывается при первом щелчке снаружи, но затем снова нажимает на кнопку, которую он не открывает, как следует.Это расширенная ария, классы и superfish.js, которые запутывают вещи.

Это не дубликат других упрощенных меню, которые закрываются при щелчке снаружи, поскольку его поведение намного сложнее.

1 Ответ

0 голосов
/ 13 сентября 2018

Для тех, кто интересуется будущим, сделать это проще, нажав кнопку:

var $button = $('.navbar-toggle');
$(document).mouseup(function (e) {
  if ($('#navbar-collapse').hasClass('in')) 
  {
     $button.trigger("click"); 
  }
});
...