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>

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

Answer 1

这是我在您的标记中找到的解决方案。

使用CSS来美化它。

<强> Jquery的：
你做了什么？
当.menu_link被徘徊时，我会找到它所拥有的索引索引发现它是第一个孩子还是第二个孩子等当我们有这个神奇的索引号 var nthNumber
时我们可以用它来找到相应的.submenu_panel（因为我看不到你的所有代码，我在这里猜测）并隐藏或显示这个面板

EG。当我们悬停第一个 .menu_link时，我们将展示第一个 .submenu_panel
我们对第二和第三等做同样的事情。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

我认为这就是你要求的？使用CSS而不是jquery。这应该可以帮到你。

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

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

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

}

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

2 个答案: