简体   繁体   English

如何使下拉菜单在悬停时保持打开状态,并在离开时消失

[英]how to make dropdown keep open on hover and disappear when leave it

i really need help. 我真的需要帮助。 i tried but it is still not working. 我尝试过,但仍然无法正常工作。 i want to make a dropdown menu that will appear on hover and will disappear when leave that dropdown. 我想创建一个下拉菜单,该菜单将出现在悬停时,离开该下拉菜单时将消失。

 $(document).ready(function(){ $('.navigation-menu').mouseenter(function(){ $('.navigation-dropdown').addClass('visible'); }); $('.navigation-dropdown').mouseleave(function(){ $('.navigation-dropdown').removeClass('visible'); }); }); 
 ul{ margin: 0; } .container{ background-color: rgb(0,0,0); height: 30px; padding: 10px; } .container-dropdown{ background-color: rgb(125,125,125) } .dropdown-menu{ display: inline-block; } .navigation-dropdown{ display: none; } .navigation-menu{ display: inline-block; height: 100%; } .visible{ display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="header"> <div class="container"> <img src="" alt=""> <div class="navigation"> <ul> <li class="navigation-menu"><a href="">home</a></li> <li class="navigation-menu"><a href="">home</a></li> <li class="navigation-menu"><a href="">home</a></li> </ul> </div> </div> <div class="navigation-dropdown"> <div class="container-dropdown"> <ul> <li class="dropdown-menu"> <img src="http://placehold.it/50x50" alt=""> </li> <li class="dropdown-menu"> <img src="http://placehold.it/50x50" alt=""> </li> <li class="dropdown-menu"> <img src="http://placehold.it/50x50" alt=""> </li> </ul> </div> </div> </header> 

So, i just want to make that gray div disappear when i move my mouse leave the navigation-menu class 因此,当我移动鼠标离开导航菜单类时,我只想使该灰色div消失

my problem: i have to move the mouse to the gray div first to make the gray div disappear. 我的问题:我必须先将鼠标移至灰色div,以使灰色div消失。 all i want is make the gray div can disappear without have to move the mouse to the gray div first 我想要的是使灰色div消失,而无需先将鼠标移至灰色div

There are much better design options for you to look forward to, to get what you want. 有许多更好的设计选项供您期待,以获取所需的东西。 But if you just want to stick to the current layout and design, I would make a couple of changes to get what you are looking for. 但是,如果您只想坚持当前的布局和设计,我将进行一些更改以获取所需的内容。

.container{
  background-color: rgb(0,0,0);
  height: 20px;
  padding: 10px;
  padding-bottom: 0px; --to remove any space between menu title and the dropdown
}

and

$(document).ready(function(){
    $('.navigation-menu').mouseenter(function(){
    $('.navigation-dropdown').addClass('visible');
  });
  $('.navigation-dropdown').mouseleave(function(){
    $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-dropdown').mouseenter(function(){
      $('.navigation-dropdown').addClass('visible');
  });

  $('.navigation').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-menu').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });
});

to hide dropdown menu if mouse leaves navigation div. 如果鼠标离开navigation div,则隐藏下拉菜单。

hope this helps. 希望这可以帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM