0

因此，我正在尝试创建一个向下滑动的菜单，其中父项与该项一起向下滑动。我想这样做的唯一方法是将主菜单项放在底部，将子项放在顶部。这不是首选，但它似乎有效。

现在的问题是，如果将鼠标悬停在错误的部分上，菜单似乎会跳动/不流畅。有没有办法让主菜单项在顶部并阻止它如此跳跃？

一个 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 的点击。可以在此处找到该小提琴理想情况下，我希望它无需单击并具有有效标记即可工作。

这是更新的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();
}

);​
4

2 回答 2

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();
            });
    });

​</p>

于 2012-09-26T17:56:24.260 回答
0

似乎获胜者是这个 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();
}

);
于 2012-10-08T07:00:33.803 回答