单击外部时 Superfish 扩展菜单不会关闭

Question

我有这个带有标记的扩展 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");
  }
 });

但它不能正常工作。它会在第一次点击外部时关闭，但再次点击它不会按预期打开的按钮。它是 aria-expanded，类和 superfish.js 把事情搞砸了。

它不是其他点击外部关闭的简化菜单的副本，因为它的行为要复杂得多。

Answer 1

对于任何对未来感兴趣的人，通过触发按钮以更简单的方式完成：

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

单击外部时 Superfish 扩展菜单不会关闭

Superfish expanded menu doesn't close when clicking outside

html

jquery

drupal

menu