李小姐（移动导航）如何让家长被推倒

Question

非常感谢，

我坚持使用移动导航。我的主导航有一些隐藏的导航。 单击父li会打开subnav，但subnav会隐藏下面的所有其他父项li。

我怎样才能让那个孩子通过向下推父李来“挤进”父母之间？

$(".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：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;