Привет, я пытаюсь создать раскрывающееся меню с помощью jQuery, я использую функцию slideToggle
, чтобы закрыть предыдущее меню при следующем нажатии. Однако, когда я нажимаю элемент навигации, другие элементы, похоже, опускаются примерно на 20 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/ скрипка
float: left