显示/隐藏div下拉菜单

时间:2017-07-11 23:36:20

标签: javascript jquery html css drop-down-menu

我正在尝试制作一个类似于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”链接中删除光标时,下拉列表会立即消失。

如何构建这种下拉列表(Nakedchp)?

dropdown

我似乎只能找到链接在其下方显示一行链接的链接,如下所示。

dropdown

可以使用现有菜单的任何想法或知识吗?谢谢!

5 个答案:

答案 0 :(得分:0)

您可以在没有脚本的情况下执行此操作。使用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();

});  

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

希望有所帮助!

答案 1 :(得分:0)

如果你想用jquery做,那么你可以使用下面的代码。它显示了只有一部分菜单工作的片段。

&#13;
&#13;
$("#BrandsAll").hover(function() {
  $("#BrandDropdown").toggleClass("show","hide");
});
&#13;
#BrandDropdown{display:none;}
#BrandDropdown.show{display:block;}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

我可能会将下拉列表放在列表标题的<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的类开始。

.hidden {
  display: none;
}

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

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

您必须使用CSS进行更多操作才能正确定位下拉列表,但我认为您已经在某个地方找到了它。

答案 3 :(得分:0)

默认情况下,在下拉列表中使用display none,然后在菜单悬停时使用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>

答案 4 :(得分:0)

我喜欢我的下拉菜单,即使他们没有被徘徊也要保持开放,所以我做了一些有点厚颜无耻的事情。

我使用按钮和:焦点选择器来保持菜单打开,即使它没有悬停在上面。当然还有其他方法可以做到这一点,但请查看我的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>