如何让父李被孩子李推下来(手机导航)
问题描述:
非常感谢提前,如何让父李被孩子李推下来(手机导航)
我卡在手机导航。我有主导航与一些隐藏的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>
谢谢!
答
更改.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>
谢谢!像魅力一样工作 – Tomislav