如何讓父李被孩子李推下來（手機導航）

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>