Jquery “制作幻灯片”下拉菜单也可以制作幻灯片

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

现在的问题是，如果您将鼠标移到菜单的错误部分，菜单似乎会跳动/不平滑。有没有办法把主菜单项放在最上面，让它不那么紧张

A在这里

以下是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>

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

);​

试试这个解决方案

HTML

---

​

看来胜利者是这个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();
}

); 

---

您可以随时尝试hoverIntent插件：）

<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>

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

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

);