重构不是兄弟姐妹的多个菜单的js

Question

我创建了一个标题部分，其中包含两个不在同一个ul中的菜单。我希望菜单在点击时打开子菜单并添加一个类（菜单打开）。一次只能打开一个菜单。我已经使用jQuery实现了这一点。但是，我觉得它可以更短或写得更好。我研究了这个，人们正在使用兄弟元素。但是，在我的代码中，菜单的两个uls是分开的并浮动到div的边缘。

这是我的HTML：

<div>
 <ul class="menu-1 menu-btn">
  <li><a class="menu-link" href="">Menu 1</a>
    <ul class="sub-menu">
     <li>Item 1</li>
     <li>Item 2</li>
    </ul>
  </li>
 </ul>
 <ul class="menu-2 menu-btn">
  <li>link1</li>
  <li>link2</li>
  <li><a class=menu-link href="">Menu 2</a>
   <ul class="sub-menu">
    <li>Item 1</li>
    <li>Item 2</li>
   </ul>
  </li>
 </ul>
</div>

这是我的jsfiddle： https://jsfiddle.net/8b8Lzm7v/10/

任何建议/帮助表示赞赏。提前谢谢

Answer 1

这可能有点短，但如果您添加更多菜单，则不应再延长。建议关闭所有菜单，然后在检查它是否已经打开后打开特定的点击菜单之前，如果点击非菜单div，可选择添加另一个点击处理程序以关闭所有菜单

＆＃13;

＆＃13;

(function($) {

  function hideMenus() {
      $("ul.sub-menu").slideUp(100); // slide up all menus
      $(".menu-link").removeClass("menu-open"); // no menus are open
    } // hide all menu's as a function

  $(".menu-link").on("click", function() {
    var $this = $(this),
      menuOpen = $this.hasClass("menu-open") || false;

    hideMenus();

    if (!menuOpen) { // if the menu is closed...
      $this.siblings('ul.sub-menu').slideDown(100); // this opens all .submenu's adjacent
      $this.addClass("menu-open");
    }
    return false;
  });

  $('body').not('.menu-btn').on('click', function() {
    hideMenus();
    return false;
  }); // optional to hide menu's if any other div is clicked

}(jQuery));

＆＃13;

div {
  display: inline-block;
  width: 100%;
}
a {
  display: block;
}
.menu-btn {
  display: inline-block;
  list-style: none;
}
.menu-btn li {
  display: inline-block;
}
.sub-menu {
  display: none;
  width: 100px;
  position: absolute;
  border: 1px solid gray;
}
.menu-1 .sub-menu {
  left: 0;
}
.menu-2 .sub-menu {
  right: 0;
}
.menu-2 {
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class="menu-1 menu-btn">
    <li><a class="menu-link" href="">Menu 1</a>
      <ul class="sub-menu">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </li>
  </ul>
  <ul class="menu-2 menu-btn">
    <li>link1</li>
    <li>link2</li>
    <li><a class=menu-link href="">Menu 2</a>
      <ul class="sub-menu">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;