Question

我尝试基于jquery click事件创建一个多级菜单。我打开和关闭了第二级元素，当您打开一个元素而另一个元素关闭了。但是我希望在打开任何第二级元素时也关闭第三级。

还可以通过单击文档正文来打开项目吗？

我该怎么办，以使打开的菜单不会将盒子推下？

我附上了代码片段，所以请您给我一些解决方法的想法吗？，谢谢

这是我的js

$(document).ready(function(){
  $(".open-submenu").click(function(){
  event.stopPropagation();
    $(this).parent().children('ul').toggleClass("show");
  });
});

var $items = $('.main-menu .item-menu > .open-submenu').click(function () {
	var submenu = $(this).next();
    $subs.not(submenu).hide()
    submenu.toggle();
});
var $subs = $items.next();

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

.main-menu {
	display: flex;
    flex-direction: row;
}

.main-menu .item-menu {
  display: block;
  padding: 10px 5px;
}

.main-menu .item-menu .sub-menu, .main-menu .item-menu .sub-menu {
  display: none;
}

.main-menu .item-menu .show {
  display: block;  
  transition: all .5s ease;
}

.border {
	border-bottom: 1px solid;
}

.box-1 {
    background-color: blue;
    width: 100%;
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul class="main-menu">
    <li class="item-menu">
      <a href="https://www.google.com">First level</a>
      <label class="open-submenu">▾</label>
      <ul class="sub-menu">
        <li><a>Item 1.1</a></li>
        <li>
          <a>Second level</a>
          <label class="open-submenu">▾</label>
          <ul class="sub-menu">
            <li><a href="https://www.google.com">Third level</a></li>
            <li><a>Third level</a></li>
          </ul>
        </li>
        <li>
		Item 1.3
        </li>
      </ul>
    </li>
    <li class="item-menu">
      <a>Item 2</a>
    </li>
    
    <li class="item-menu">
      <a>Item 3</a>
    </li>
    <li class="item-menu">
      <a>First level 4</a>
      <label class="open-submenu">▾</label>
      <ul class="sub-menu">
        <li>
          <a>Item 4.1</a>
          <label class="open-submenu">▾</label>
          <ul class="sub-menu">
            <li><a>Item 4.1.1</a></li>
            <li>Item 4.1.2</li>
            <li>Item 4.1.3</li>
          </ul>
        </li>
        <li><a>Item 4.2</a></li>
        <li><a>Item 4.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

<section class="box-1">
    box 1
</section>

<section class="box-2">
    box 2
</section>

关闭菜单的所有元素（包括子菜单）

0 个答案: