Question

所以我正在尝试创建一个向下滑动的菜单，其中父项目随项目向下滑动。我想要做的唯一方法是将主菜单项放在底部，子项放在顶部。这不是优选的，但似乎有效。

现在的问题是如果你将鼠标放在错误的部分上，菜单似乎是跳跃/不平滑。有没有办法让主菜单项位于顶部并阻止它如此跳跃？

jsFiddle就在这里

这是HTML：

<ul>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
        <li> Main Menu Item </li>
</ul>
<ul>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
        <li> Main Menu Item 2 </li>
</ul>

CSS：

ul ul li {
    display: none;
}

ul {
    display:inline;
    float:left;
    width:150px;
}

最后是jQuery

$("ul").hover(

function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
    $(this).find('ul li').stop(true, true).slideUp();
}

);

修改

所以看起来其中一个是无效的标记。有人建议只使用Javascript将第一个li标签移动到该部分的底部。我有一个例子只适用于第一个li的点击。可以找到那个小提琴here理想情况下，我希望它在没有点击和有效标记的情况下工作。

这是更新的JS

    $("ul li:first").click(function() {

  $(this).parent().append($(this));

});

$("ul").hoverIntent(
function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul li').stop(true, true).slideUp();
}

);

Answer 1

尝试此解决方案

的 HTML 的

<nav id="verticalmenu"> <ul> <li> <ul class="down"> <li><a href="#">Menu#1-1</a></li> <li><a href="#">Menu#1-2</a></li> <li><a href="#">Menu#1-3</a></li> </ul> <a class="slide" href="#">Menu#1</a> </li> <li> <ul class="down"> <li><a href="#">Menu#2-1</a></li> <li><a href="#">Menu#2-2</a></li> <li><a href="#">Menu#2-3</a></li> </ul> <a class="slide" href="#">Menu#2</a> </li> </ul>

的 JS 的

var nav = $("#verticalmenu"); //add hovers to submenu parents nav.find("li").each(function() { var li_ul = $(this).find("ul"); li_ul.hide(); //show subnav on hover $(this).mouseenter(function() { li_ul.stop(true, true).slideDown(); }); }); nav.find("li").each(function() { var li_ul = $(this).find("ul"); li_ul.hide(); //show subnav on hover $(this).mouseleave(function() { li_ul.stop(true, true).slideUp(); }); });

Answer 2

看来Winner就是这个JavaScript

$("ul li:first-child").not("ul li li").hover(function() {

  $(this).parent().append($(this));

});   

$("ul").hoverIntent(
function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul li').stop(true, true).slideUp();
}

);

下滑菜单也可以滑动父母

2 个答案: