带有jQuery和nth-child的下拉菜单 [英] Dropdown menu with jQuery and nth-child

问题描述

我刚刚做了一个下拉菜单与jQuery和一点点
特殊的html结构。
这是我的结构看起来像。


这是jsFiddle，它创建了： https://jsfiddle.net/rxLg0bo4/10/

但是我想让它像一个正确的下拉菜单工作。这意味着，当您将鼠标悬停在菜单上时，应显示submenu_link。 f.e。如果你将鼠标悬停在menu_link q上，submenu_link 1-5应该下拉。

这是jQuery：

I just made a dropdown menu with jQuery and a little bit special html structure. This is how my structure looks like.
And this is the jsFiddle, which was created: https://jsfiddle.net/rxLg0bo4/10/
But I want it to work like a proper dropdown menu. So that means it should show the submenu_link when you hover over the menu. f.e. if you hover over the menu_link q, the the submenu_link 1-5 should dropdown.
This is the 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代码：

And this is my ASP.NET code:

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

我可以用nth-child吗？
我也想在列表样式中有链接，我该怎么办？

Can i do this with the nth-child anyhow? I would also like the have the links in a list style how can I do that?

推荐答案

解决方案我发现您的标记。

Here is a solution i found with your markup.

使用CSS来美化它。

Used CSS to beautify it.

Jquery：

您做了什么？

当 .menu_link 是悬停我找到它的索引。

索引查找它的第一个孩子或第二个等。

当我们有这个魔术索引 var nthNumber

我们可以使用它找到它对应的 .submenu_panel （我猜这里，因为我看不到你的所有代码）并隐藏或显示此面板

Jquery:
What did you do?
when .menu_link is hovered i find what index it has.
The index finds if its the first child or second etc.
When we have this magic index number var nthNumber
we can use it to find its corresponding .submenu_panel (I'm guessing here since i cant see all your code) and hide or show this panel

例如。当我们悬停第一 .menu_link ，

时，我们会显示第一 .submenu_panel

我们对第二个和第三个也是这样。

Eg. when we hover the first .menu_link,
we will show the first .submenu_panel
And we do the same for the second and third etc.

$(".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>

这篇关于带有jQuery和nth-child的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！