Question

我已经在这里看了很多关于此的不同帖子，我认为我正确地遵循了所有内容，但我的代码没有执行，所以显然我不是。想知道这里是否有人可能会注意到我忽略的东西。

我有一个导航栏，当用户在菜单项上悬停时，我希望div从其下方向下滑动并显示一堆内容。

这是标记：

<nav class="site-navigation main-navigation" role="navigation">
    <div class="menu-1-container">
        <ul id="menu-1" class="menu">
             <li id="menu-item-1">
                <a href="#">Releases</a>
            </li>
        </ul>
    </div>
</nav>

<div class="dropdown-contain">
    <p>Content</p>
</div>

这是css：

.dropdown-contain {
    display: none;
}

这里是.js（还在学习，并且没有完全掌握）：

$(document).ready(function(){
    $(".menu-item-475").hover(function () {
        $(".dropdown-contain").stop(true, true).slideToggle("slow");
    });
});

这是一个小提琴。 http://jsfiddle.net/ericbrockman/mk4yu/3/

感谢一帮!!

Answer 1

我改变了你的小提琴，看看Here

需要注意的事项：

1 - you should select your jquery library on the left panel of jsfiddle.
2 - delegating event handlers by attaching them to document seem to work better for me
3 - using custom animation you have more control over the sliding
4 - set position:absolute for the sliding panel if you want it to work correctly
5 - when attaching the mouse hover to a menu item, always include the submenu as well or you will not be able to click the submenu since when you move the mouse out of the menu item the submenu goes off

如果您有更多问题，请告诉我。 - 如果我的回答对你有帮助，请考虑接受它：）

使用jQuery滑动div的难度

1 个答案: