jquery - 如何将多级添加到响应式 css 菜单中？

Question

在你们对我大吼大叫之前， 我知道有很多关于此的问题，我也看到了一些不错的完整菜单。

但是我的看起来很简单，可能是因为我用了很长时间，和gf.lol一样

At the moment my menu has 2 levels but I want to do it multi level

我尝试了几种解决方案，但无法实现，我的 css 很差。 这是我在那里做测试的 fiddle :https://jsfiddle.net/Netmaster/14gcz7bk/

这里是我的代码:

$("nav div").click(function() {
  $("ul").slideToggle();
  $("ul ul").css("display", "none");
});
// $("ul li").click(function(){
//     $("ul ul").slideUp();
//     $(this).find('ul').slideToggle();
// });
$('ul li').click(function() {
  $(this).siblings().find('ul').slideUp();
  $(this).find('ul').slideToggle();
});
$(window).resize(function() {
  if ($(window).width() > 768) {
    $("ul").removeAttr('style');
  }
});

nav div {
  padding: 0.6em;
  background: #e3e3e3;
  display: none;
  cursor: pointer;
  color: #292929;
  font-size: 24px;
}

nav ul li i {
  color: #292929;
  float: right;
  padding-left: 20px;
}

ul {
  margin: 0px;
  padding: 0px;
  background: #e3e3e3;
  list-style-type: none;
  position: relative;
}

ul li {
  display: inline-block;
}

ul li a {
  padding: 15px;
  color: #292929;
  text-decoration: none;
  display: block;
}

ul li:hover {
  background: lightgrey;
}

ul ul {
  position: absolute;
  min-width: auto;
  background: lightgrey;
  display: none;
}

ul ul li {
  display: block;
  background: #e3e3e3;
}

ul li:hover>ul {
  display: block;
}

@media (max-width: 768px) {
  nav div {
    display: block;
  }
  ul {
    display: none;
    position: static;
    background: #e3e3e3;
  }
  ul li {
    display: block;
  }
  ul ul {
    position: static;
    background: #e3e3e3;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div>
    <i class="fa fa-bars"></i>
  </div>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">JavaScript <i class="fas fa-sort-down"></i></a>
      <ul>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Vanilla JavaScript</a></li>
        <li><a href="#">ReactJS</a></li>
        <li><a href="#">VueJS</a></li>
      </ul>
    </li>
    <li><a href="#">Graphic Design <i class="fas fa-sort-down"></i></a>
      <ul>
        <li><a href="#">Font</a></li>
        <li><a href="#">PSD</a></li>
        <li><a href="#">Illustration</a></li>
        <li><a href="#">Texture</a>
        </li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

您应该调用 stopPropagation() 方法以防止第一级关闭，同时关闭第二级:

$('ul li').click(function(e) {
  e.stopPropagation();
  $(this).find('ul').slideToggle();
});