显示/隐藏div下拉菜单

Question

我正在尝试制作一个下拉菜单，例如https://www.nakedcph.com/上的下拉菜单。 我当前的想法是制作一个菜单，其中链接在悬停时显示不同的div，该菜单位于当前菜单下方，并将用作下拉菜单

  <div id="menu"> <ul> <li id="newarrivals-trigger"><a href="url">New Arrivals</a></li> <li><a href="url">Brands</a></li> <li><a href="url">Accessories</a></li> <li><a href="url">Journal</a></li> </ul> </div> 

＃newarrivals-trigger在下面显示此内容

 <div id="dropdown"> <ul> <li><a href="#">Adidas</a></li> <li><a href="#">Nike</a></li> <li><a href="#">New Balance</a></li> <li><a href="#">Puma</a></li> </ul> <ul> <li><a href="#">Vans</a></li> <li><a href="#">Y3</a></li> <li><a href="#">Reebook</a></li> </ul> </div> 

使用

 <script> $(document).ready(function(){ $("#newarrivals-trigger").hover(function(){ $("#dropdown").show(); }, function(){ $("#dropdown").hide(); }); }); </script> 

我的问题是，当我从id =“ newarrivals-trigger”链接中删除光标时，下拉div会立即消失。

如何构造这种下拉菜单（Nakedchp）？

我似乎只能找到这样的链接，链接在其下显示一行链接。

对现有菜单有任何想法或知识吗？ 谢谢！

Answer 1

您可能无需脚本即可执行此操作。 使用CSS，您可以在鼠标悬停时操作特定元素。 我会尝试将菜单创建为一个单独的元素

.menuDiv{
  display:none;
}

然后，当您将鼠标悬停在要触发的链接上时，可以使用

link:hover .menuDiv{
  display:block;
}

您可能还想添加

.menuDiv:hover{
  display:block;
}

为了防止鼠标离开链接时菜单消失。

或者，使用您的代码，尝试以下操作：

$("#newarrivals-trigger").on("mouseenter", function(){

    $("#dropdown").show();

});

$("#dropdown").on("mouseout", function(){

   $("#dropdown").hide();

});  

这将分别处理鼠标悬停和鼠标退出事件，这应该有助于解决您的问题。

希望有帮助！

Answer 2

如果要使用jquery进行操作，则可以使用以下代码。 它仅显示了菜单工作的一部分。

 $("#BrandsAll").hover(function() { $("#BrandDropdown").toggleClass("show","hide"); }); 

 #BrandDropdown{display:none;} #BrandDropdown.show{display:block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="menu"> <ul id="newarrivalsTrigger"> <li>New Arrivals</li> <li id=BrandsAll>Brands <ul id="BrandDropdown"> <li><a href="#">Adidas</a></li> <li><a href="#">Nike</a></li> <li><a href="#">New Balance</a></li> <li><a href="#">Puma</a></li> </ul> </li> <li>Accessories</li> <li>Journal</li> </ul> </div> 

Answer 3

我可能会将下拉列表放在列表标题的<li>内。

<div id="menu">
  <ul>
    <li id="newarrivals-trigger"><a href="url">New Arrivals</a>
      <div id="dropdown" class="hidden">
        <ul>
          <li><a href="#">Adidas</a></li>
          <li><a href="#">Nike</a></li>
          <li><a href="#">New Balance</a></li>
          <li><a href="#">Puma</a></li>
        </ul>
        ...
      </div>
    </li>
    <li><a href="url">Brands</a></li>
    <li><a href="url">Accessories</a></li>
    <li><a href="url">Journal</a></li>
  </ul>
</div>

并让#dropdown div从设置display: none的类开始display: none 。

.hidden {
  display: none;
}

然后让悬停触发器删除/添加类，而不是使用show / hide。 这样，只要鼠标停留在列表标题或下拉列表上，它仍将悬停在顶层li 。

<script>
  $(document).ready(function(){
    $("#newarrivals-trigger").hover(function(){
      $("#dropdown").removeClass("hidden");
    }, function(){
      $("#dropdown").addClass("hidden");
    });
  });
</script>

您必须对CSS进行更多操作才能正确放置下拉列表，但我想您已经在某个地方找到了。

Answer 4

默认情况下，在下拉菜单中不显示任何内容，然后在悬停菜单时使用display：block进行显示

 $('li').on('mouseover', function() { $('ul li div.hover').removeClass('active'); var submenu = $(this).children()[1]; $(submenu).addClass('active'); }); $('ul li div.hover').on('mouseout', function() { $(this).removeClass('active'); }); 

 li{ display: inline-block; } .hover { position: absolute; top: 35px; display: none; } .hover.active{ display: block; } .hover1:hover > .hover { display: block; } .hover2:hover > .hover { display: block; } .hover3:hover > .hover { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li class="hover1"> <a href="">Link</a> <div class="hover">dropdown menu1</div> </li> <li class="hover2"><a href="">Link</a> <div class="hover">dropdown menu2</div> </li> <li class="hover3"> <a href="">Link</a> <div class="hover">dropdown menu3</div> </li> </ul> 

Answer 5

我希望我的下拉菜单即使不被悬停也能保持打开状态，所以我做的事有些厚脸皮。

我使用按钮和：focus选择器使菜单保持打开状态，即使它没有悬停在菜单上也是如此。 当然，还有其他方法可以执行此操作，但是请查看我的jsfiddle，了解一个非常精致的纯CSS示例。

我认为最重要的一点是完整（或几乎完整）的宽度。 要做到这一点，只需确保下拉菜单中的内容在导航栏中即可，并且导航栏已设置了位置（例如“相对”）。 然后，您的下拉菜单应具有绝对位置，顶部为100％（或更高），左侧为0（或任何其他值）。

然后，确保您的drowndown或navbar之间没有设置位置，并且应该获得不错的全宽下拉菜单。

 .root, body, html{ margin : 0px; padding : 0px; width : 100%; height : 100%; background-color : blue; display : flex; flex-direction : column; } .navbar{ position : relative; height : 60px; width : 100%; background-color : white; display : flex; flex-direction : row; justify-content : center; } .dropdown{ position : absolute; top : 105%; left : 0px; display : none; height : 200px; background-color : white; width : 100%; } .link:focus .dropdown{ display : flex; } 

 <div class="root"> <div class="navbar"> <button class="link"> <div class="text">Dropdown 1</div> <div class="dropdown"> Content 1 </div> </button><button class="link"> <div class="text">Dropdown 2</div> <div class="dropdown"> Content 2 </div> </button><button class="link"> <div class="text">Dropdown 3</div> <div class="dropdown"> Content 3 </div> </button> </div> <div class="content"> Lorem ipsum and other such words </div> </div>