使用 jQuery 和子选择器制作下拉菜单

Question

我刚刚用 jQuery 制作了一个下拉菜单。 这就是我的结构的样子。
这是创建的 jsFiddle：https://jsfiddle.net/rxLg0bo4/10/
目前，它显示整个 pnlSubmenu，但如果我将鼠标悬停在 pnlMenu 的第一个子项上，它应该只显示 submenu_link 1-5。
这是 jQuery：

$(document).ready(function () {
           $('.menu_link').ready(function () {
               $("[id$=pnlSubmenu]").hide();
           });
           $('.menu_link').hover(function () {
               $("[id$=pnlSubmenu]").slideDown(200);
           });
           $('[id$=pnlSubmenu]').mouseenter( function () {
               $(this).show();
           });
           $('[id$=pnlSubmenu]').mouseleave(function () {
               $(this).hide();
           });
           $('.menu_link').mouseleave(function () {
               $("[id$=pnlSubmenu]").hide();
           });
       });

这是我的 ASP.NET 代码：

<nav id="menu">

            <asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
            <asp:Panel ID="pnlSubmenu" runat="server">

                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>


            </asp:Panel>
        </nav>

无论如何，我可以对第 n 个孩子这样做吗？ 我尝试了类似的方法，但没有任何反应。

 $("[id$=pnlMenu]").children(1).hover(function () {
               $("[id$=pnlSubmenu]").children(1).slideDown(200);
           });

Answer 1

可以使用.index()获取元素的索引，然后可以使用.eq()方法。

$("[id$=pnlMenu]").children().hover(function () {
    var index = $("[id$=pnlMenu]").index(this); //Get the index
    $("[id$=pnlSubmenu]").children().eq(index).slideDown(200);

    //You can also use :eq()
    //$("[id$=pnlSubmenu]").children(":eq(" + index + ")").slideDown(200);
});

注意：索引是从零开始的