如何让父李被孩子李推下来（手机导航）

Question

非常感谢提前，

我卡在手机导航。我有主导航与一些隐藏的subnavigation。 点击父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

更改.subnavposition到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>