点击时无法关闭菜单

Question

我试图有一个导航菜单上的行动（打开和关闭）这是我的代码。

在这里，我可以打开项目，并在我点击外面的时候隐藏它，但我也需要在我点击链接时关闭项目。.menu-item-has-children > a

var click_item = function() {
$('.menu-item-has-children > a').on('click', function() {
  var EltToToggle = $(this).next('.sub-menu');

  if ($(this).attr('href') === "#") {
    event.preventDefault();
  }

  if ($(this).attr('aria-expanded') === "true") {
    console.log("ppppp");
    $(this).attr('aria-expanded', false);
    $(this).removeClass('is-opened');
    EltToToggle.removeClass('show');
    console.log("click true")
  } else if ($(this).attr('aria-expanded') === "false") {
    $(this).attr('aria-expanded', true);
    $(this).addClass('is-opened');
    EltToToggle.addClass('show');
    console.log("click false")
  }
});
}
click_item();



$(document).mouseup(function(e) {
    var sub_menu = $(".sub-menu");

    // If the target of the click isn't the sub_menu
    if (!sub_menu.is(e.target) && sub_menu.has(e.target).length === 0) {
      sub_menu.removeClass('show');
      $(".menu-item-has-children > a").attr('aria-expanded', false);
      $(".menu-item-has-children > a").removeClass('is-opened');
      console.log("ok")
    }
    click_item();
  });

.menu {
  display: flex;
}

li {
  margin: 10px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: auto;
  left: 50%;
  -webkit-transform: translate(-50%, 2rem);
  transform: translate(-50%, 2rem);
  padding: 1rem 0;
  background-color: #fff;
  border-radius: .6rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}

.show {
  display: block!important;
}
.menu-item-has-children>a {
position: relative
}

.menu-item-has-children>a:after {
    top: 2rem;
    right: 1.5rem;
}

.menu-item-has-children>a:after {
    content: "\f077";
    font-family: FontAwesome!important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: inherit;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-alt: "";
    speak: none;
    right: 1.6rem;
    top: 2.3rem;
    font-size: 1rem;
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease,-webkit-transform .25s ease;
}
.menu-item-has-children>a:after {
    top: 2rem;
    right: 1.5rem;
}
 .menu-item-has-children>a[aria-expanded=true]:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>

Answer 1

试着用css类来隐藏你的导航栏，这将是一个简单而有效的方法来管理它。

也可以替换 $(document).mouseup 与 $(document).click你只需要点击事件，所以我建议避免使用 mouseup 在这种情况下。

你可以做这样的事情。

$(document).ready(function() {

  $(document).click(function(event) {
    var clickover = $(event.target);
    // if the user click outside navbar
    if (!clickover.hasClass("navbar")) {
      $(".navbar").removeClass("in");
    }
  });

});

.navbar.in {
  background: red;
  width: 100px;
  height: 100%;
  position: absolute;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo Test</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>

<body>

 <div class="navbar in"></div>
 
</body>
</html>

点击 外面 导航栏就会被关闭。这只是一个 演示 可以帮助你了解如何通过点击事件来隐藏元素。

Answer 2

下面是一个解决方案

如果没有子菜单，则用类显示关闭所有的父级uls

我还将if转换为toggle。

$('.menu-item-has-children  a').on('click', function() {
  var EltToToggle = $(this).next('.sub-menu');

  if ($(this).attr('href') === "#") {
    event.preventDefault();
  }
  const expanded = $(this).attr('aria-expanded') === "true"

  $(this).attr('aria-expanded',    !expanded);
  $(this).toggleClass('is-opened', !expanded);
  EltToToggle.toggleClass('show',  !expanded);

  if (EltToToggle.length === 0) {
      $(this).parents("ul,show").toggleClass("show",false)
  }

});


$(document).mouseup(function(e) {
  var sub_menu = $(".sub-menu");

  // If the target of the click isn't the sub_menu
  if (!sub_menu.is(e.target) && sub_menu.has(e.target).length === 0) {
    sub_menu.removeClass('show');
    $(".menu-item-has-children > a").attr('aria-expanded', false);
    $(".menu-item-has-children > a").removeClass('is-opened');
    console.log("ok")
  }
});

.menu {
  display: flex;
}

li {
  margin: 10px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: auto;
  left: 50%;
  -webkit-transform: translate(-50%, 2rem);
  transform: translate(-50%, 2rem);
  padding: 1rem 0;
  background-color: #fff;
  border-radius: .6rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}

.show {
  display: block!important;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>

Answer 3

试试这个

   $(document).ready(function(){
  $("*").click(function(){
    $(".menu-item-has-children > a").removeClass('is-opened');
  });
});