您好我尝试使用jQuery创建一个下拉菜单,我正在使用slideToggle
函数,以便在下一次单击时关闭上一个菜单。但是,当我单击导航元素时,其他元素似乎会丢弃20px
。
我不能100%确定为什么会这样,如果有人能告诉我哪里出错了,我会很感激。提前致谢。
我的代码位于下方或查看jsFiddle
JS / js.js
$('.nav_parent h5').click(function () {
$(this).next('.nav_child').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
的index.html
<div class="container">
<ul id="header_nav">
<li class="nav_parent">
<h5>Reports</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">Download CSV</a>
</li>
</ul>
</li>
<li class="nav_parent">
<h5>Build</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">Build new site</a>
</li>
</ul>
</li>
<li class="nav_parent">
<h5>Subscriptions</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">E-Briefings</a>
</li>
</ul>
</li>
<li class="nav_parent">
<h5>Media Store</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">Image Store</a>
</li>
</ul>
</li>
</ul>
</div>
CSS / style.css中
.nav_parent {
display:inline-block;
width:24%;
background:#FCCC5F;
}
.nav_parent h5:hover {
background:#FCE49D;
}
.nav_child {
display:none;
}
.nav_child li {
line-height:30px;
}
.nav_child li:hover {
background:#FCE49D;
}
答案 0 :(得分:1)
你的css有问题。改为:
.nav_parent {
display:block;
float: left;
width:24%;
background:#FCCC5F;
}