嗨,我试图使用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;
}
最佳答案
您的CSS有问题。改成:
.nav_parent {
display:block;
float: left;
width:24%;
background:#FCCC5F;
}
http://jsfiddle.net/uCaQ2/
小提琴
关于jquery - jQuery slideToggle将导航元素移出位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19891366/