У меня есть это расширенное меню 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, которые запутывают вещи.
Это не дубликат других упрощенных меню, которые закрываются при щелчке снаружи, поскольку его поведение намного сложнее.