javascript - 带有 jQ​​uery 和 nth-child 的下拉菜单

Question

我刚刚用 jQuery 做了一个下拉菜单特殊的html结构。这就是我的结构的样子。
这是 jsFiddle，创建于:https://jsfiddle.net/rxLg0bo4/10/
但我希望它像一个适当的下拉菜单一样工作。所以这意味着当您将鼠标悬停在菜单上时它应该显示 submenu_link。 f.e.如果将鼠标悬停在 menu_link q 上，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 个 child 这样做吗？我还希望有列表样式的链接，我该怎么做？

Answer 1

这是我通过您的标记找到的解决方案。

使用 CSS 来美化它。

Jquery:
你做了什么？
当 .menu_link 悬停时，我会找到它的索引。
索引查找它是第一个 child 还是第二个 child 等等。
当我们有了这个神奇的索引号 var nthNumber
我们可以用它来找到它对应的.submenu_panel(我猜这里是因为我看不到你所有的代码)并隐藏或显示这个面板

例如。当我们悬停在 first .menu_link 时，
我们将显示第一个 .submenu_panel
我们对第二个和第三个等做同样的事情。

$(".menu_link, .submenu_panel").hover(function() {
  //Hover inn function
  var nthNumber = $(this).index() + 1;

  $("[id$=Submenu]").show();
  $("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").show();
}, function() {
  //Hover out function
  $("[id$=Submenu]").hide();
  var nthNumber = $(this).index() + 1;
  $("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").hide();
});

#menu [id$=Menu] {
  border: 2px solid #2980b9;
  border-radius: 5px;
  background-color: #3498db;
}
#menu [id$=Menu] .menu_link {
  padding: 10px 10px;
  display: inline-block;
  font-size: 1.2em;
}
#menu [id$=Menu] .menu_link:hover {
  background-color: #45a9ec;
  //border: 2px solid #2980b9;
  border-radius: 2px;
  cursor: pointer; //Visual only (REMOVE)!
}
#menu [id$=Submenu] {
  display: none;
}
#menu [id$=Submenu] .submenu_panel {
  display: none;
  background-color: #45a9ec;
  border: 2px solid #2980b9;
  border-top: none;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
#menu [id$=Submenu] .submenu_panel .submenu_link {
  position: relative;
  display: block;
  text-indent: 15px;
  font-size: 1.1em;
  padding: 4px 0px;
  border-bottom: 1px solid #2980b9;
}
#menu [id$=Submenu] .submenu_panel .submenu_link:hover {
  background-color: #56bafd;
  cursor: pointer; //ONLY FOR VISUAL(REMOVE)!
}
#menu [id$=Submenu] .submenu_panel .submenu_link:first-child {
  border-top: 1px solid #2980b9;
  margin-top: -5px;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
  <div id="pn1Menu">
    <a class="menu_link">Lorem</a>
    <a class="menu_link">Ipsum</a>
    <a class="menu_link">Dollar</a>
    <a class="menu_link">Si</a>
    <a class="menu_link">Amet</a>
  </div>
  <div id="pn1Submenu">
    <div class="submenu_panel">
      <a class="submenu_link">100</a>
      <a class="submenu_link">200</a>
      <a class="submenu_link">300</a>
      <a class="submenu_link">400</a>
      <a class="submenu_link">500</a>
      <a class="submenu_link">600</a>
    </div>
    <div class="submenu_panel">
      <a class="submenu_link">010</a>
      <a class="submenu_link">020</a>
      <a class="submenu_link">030</a>
      <a class="submenu_link">040</a>
      <a class="submenu_link">050</a>
      <a class="submenu_link">060</a>
    </div>
    <div class="submenu_panel">
      <a class="submenu_link">1001</a>
      <a class="submenu_link">2002</a>
      <a class="submenu_link">3003</a>
      <a class="submenu_link">4004</a>
      <a class="submenu_link">5005</a>
      <a class="submenu_link">6006</a>
    </div>
  </div>
</nav>