带有jQuery和nth-child的下拉菜单

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:

我刚刚使用jQuery和一些特殊的html结构制作了一个下拉菜单。这就是我的结构的样子。这是创建的jsFiddle：https：//jsfiddle.net/rxLg0bo4/10/但我希望它能像正确的下拉菜单一样工作。这意味着当您将鼠标悬停在菜单上时，它应显示submenu_link。 F.E.如果你将鼠标悬停在menu_link q上，则应该下拉子菜单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();
  });
});

And this is my ASP.NET code:

这是我的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>

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?

无论如何我能和nth-child一起做吗？我还希望列表样式中的链接我该怎么做？

3 个解决方案

#1

Here is a solution i found with your markup.

这是我用你的标记找到的解决方案。

Used CSS to beautify it.

使用CSS来美化它。

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

Jquery：你做了什么？当.menu_link被徘徊时，我发现它有什么索引。索引找到它的第一个孩子或第二个等等。当我们有这个神奇的索引号var nthNumber时，我们可以用它来找到它对应的.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我们会对第二个和第三个等进行同样的操作。

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

#2

i tweaked quite a bit https://jsfiddle.net/rxLg0bo4/19/ You will have to try it out with a real page to know for sure.

我调整了相当多的https://jsfiddle.net/rxLg0bo4/19/您必须尝试使用​​真实页面才能确定。

 $(document).ready(function () {
     $('.menu_link').ready(function () {
         $("[id$=pnlSubmenu]").hide();
     });
     $('.menu_link1').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "0px");
     });
     $('.menu_link2').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "12%");
         
     });
     $('.menu_link3').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "25%");
     });
     $('.menu_link4').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
        $("[class$=submenu_panel]").css("left", "37%");
     });
     $('.menu_link5').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "50%");
     });
     $('[id$=pnlSubmenu]').mouseenter(function () {
         $(this).show();
     });
     $('[id$=pnlSubmenu]').mouseleave(function () {
         $(this).hide();
     });
     $('.menu_link1').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link2').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link3').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link4').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link5').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
     });

#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
    height:50px;
    display:block;
}
#wrapper_menu {
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}
#menuicon {
    margin: 0 auto;
    width: 27px;
    display: none;
}
.menubar {
    background: #001155;
    height: 4px;
    width: 27px;
    margin-bottom: 5px;
    border-radius: 2px;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#menuicon:hover #menubar-top {
    transform: translate(0px, 9px) rotate(45deg);
}
#menuicon:hover #menubar-mid {
    opacity: 0;
}
#menuicon:hover #menubar-bottom {
    transform: translate(0px, -9px) rotate(-45deg);
}
#menu {
    height: 44px;
    width: 980px;
    margin: 0 auto;
    border-radius: 5px;
    background: rgb(229, 229, 229);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229, 229, 229, 0.95)), color-stop(100%, rgba(193, 192, 194, 0.95)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#c1c0c2', GradientType=0);
    /* IE6-9 */
    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
}
#pnlMenu {
    width: 100%;
    height: auto;
}
.menu_link1, .menu_link2, .menu_link3, .menu_link4, .menu_link5, .menu_link6 {
    position:relative;
    font-size: 15px;
    line-height: 44px;
    padding: 0 40px;
    text-align:left;
}
.menu_link1:active, .menu_link2:active, .menu_link3:active, .menu_link4:active, .menu_link5:active, .menu_link6:active, .menu_link1:focus, .menu_link2:focus, .menu_link3:focus, .menu_link4:focus, .menu_link5:focus, .menu_link6:focus, {
    color: #2d98e5;
    border-radius: 5px;
    background: rgb(229, 229, 229);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(193, 192, 194, 0.95)), color-stop(100%, rgba(229, 229, 229, 0.95)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(193, 192, 194, 0.95)) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(endColorstr='#c1c0c2', startColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    -webkit-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
    box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
}
.last_menu_link {
    float: right;
}
.submenu_link {
}
.submenu_panel {
    width: 15%;
    height: auto;
    background: gray;
    position:relative;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper_menu">
    <div id="menuicon">
        <div class="menubar" id="menubar-top"></div>
        <div class="menubar" id="menubar-mid"></div>
        <div class="menubar" id="menubar-bottom"></div>
    </div>
    <nav id="menu">
        <div id="pnlMenu">	<a class="menu_link1" href="Index.aspx?category=1">menu1</a><a class="menu_link2" href="Index.aspx?category=2">menu2</a><a class="menu_link3" href="Index.aspx?category=4">menu3</a><a class="menu_link4" href="Index.aspx?category=5">menu4</a><a class="menu_link5" href="Index.aspx?category=6">menu5</a><a class="menu_link6 last_menu_link" href="Index.aspx?category=8">menu6</a>

        </div>
        <div id="pnlSubmenu" style="display:none">
            <div class="submenu_panel" style="height:100px">	<a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>

            </div>
            <div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
 <a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>

            </div>
        </div>
    </nav>
</div>

#3

I think this is what you are asking for? Use CSS rather than jquery. This should get you started.

我想这就是你要求的？使用CSS而不是jquery。这应该让你开始。

https://jsfiddle.net/cshanno/bgryLLwo/

https://jsfiddle.net/cshanno/bgryLLwo/

HTML

HTML

<ul class="menu">
    <li>Link
        <ul class="submenu">
            <li>Example 1</li>
            <li>Example 2</li>
        </ul>
    </li>
    <li> Link 2</li>
</ul>

CSS

CSS

.menu {
    border:1px solid black;
}
.menu, .menu li {
    padding:0;
    margin:0 10px;
    display:inline-block;
    list-style:none;
}
.menu ul {
    display:none;
}
.menu li:hover ul  {
    display:block;
    position:absolute;
     padding:0;
}
.menu li:hover ul li {
    margin:0 0;
    display:block;
    border: 1px solid black;
}
.menu li ul li:hover {
    background-color:skyblue;

}