嗨,我试图使用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/

10-12 12:36
查看更多