jquery - 如何让李父被李子推倒(手机导航)

Question

非常感谢，

我受困于移动导航。我有主导航和一些隐藏的子导航。 单击父 li 会打开子导航，但子导航会隐藏下面的所有其他父 li。

如何通过向下插入父 li 使子 li“挤进”父 ul 之间？

$(".main-nav").find("li").click(function() {
  $(this).find(".subnav").toggle();
});

.main-nav {
  border: 1px solid red;
  position: relative;
}

.main-nav li {
  display: inline-block;
  width: 100%;
}

.subnav {
  border: 1px dashed blue;
  position: absolute;
  display: none;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
  <li>Nav 1</li>
  <li>Nav 2</li>
  <li> Nav 3
    <ul class="subnav">
      <li>Subnav 1</li>
      <li>Subnav 2</li>
    </ul>
  </li>
  <li>Nav 4
    <ul class="subnav">
      <li>Subnav 1</li>
      <li>Subnav 2</li>
      <li>Subnav 3</li>
    </ul>
  </li>
  <li>Nav 5</li>
</ul>

谢谢!

Answer 1

将 .subnav position 更改为 relative:

$(".main-nav").find("li").click(function() {
  $(this).find(".subnav").toggle();
});

.main-nav {
  border: 1px solid red;
  position: relative;
}

.main-nav li {
  display: inline-block;
  width: 100%;
}

.subnav {
  border: 1px dashed blue;
  position: relative;
  display: none;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
  <li>Nav 1</li>
  <li>Nav 2</li>
  <li> Nav 3
    <ul class="subnav">
      <li>Subnav 1</li>
      <li>Subnav 2</li>
    </ul>
  </li>
  <li>Nav 4
    <ul class="subnav">
      <li>Subnav 1</li>
      <li>Subnav 2</li>
      <li>Subnav 3</li>
    </ul>
  </li>
  <li>Nav 5</li>
</ul>