当另一个项目悬停时关闭菜单

I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.

我正在创建一个包含两个下拉列表的菜单。我需要在菜单项悬停时打开下拉菜单,但如果另一个菜单项悬停在上面则关闭。

The problem I am having is getting the first dropdown to close if I hover over the second menu item.

我遇到的问题是如果我将鼠标悬停在第二个菜单项上,则第一个下拉列表将关闭。

Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C

请在这里查看我的小提琴:http://www.bootply.com/uEKWCdNj4C

I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered

我已经查看了其他问题,这个似乎可能有用,但是我在将它应用到我的情况时遇到了麻烦:垂直菜单在悬停时保持打开然后在另一个悬停时关闭

So I apologize if this is a duplicate...any help would be appreciated. Thanks!

所以我很抱歉,如果这是重复...任何帮助将不胜感激。谢谢!

5 个解决方案

#1

You can call slideup on the open ul before calling slidedown on the current one. like below

您可以在打开ul上调用slideup,然后再调用当前的sliding。如下

$(document).ready(function () {

  $(".nav-basic").hover(function () {
      $('ul.menu-applied').slideUp('medium');   
      $('ul.menu-basic').slideDown('medium');
  });
  $('ul.menu-basic').bind('mouseleave', function(){
     $('ul.menu-basic').slideUp('medium'); 
  }); 

  $(".nav-applied").hover(function () {
      $('ul.menu-basic').slideUp('medium');     
      $('ul.menu-applied').slideDown('medium');
  });
  $('ul.menu-applied').bind('mouseleave', function(){
     $('ul.menu-applied').slideUp('medium'); 
  });


});

#2

 $(document).ready(function() {

     $(".nav-basic").hover(function() {
         $('ul.menu-basic').slideToggle('medium');
     });

     $(".nav-applied").hover(function() {
         $('ul.menu-applied').slideToggle('medium');
     });

 });

#3

You just needed to update your script to call the slideUp function:

您只需更新脚本即可调用slideUp函数:

$(".nav-basic").hover(function () {
      $('ul.menu-basic').slideDown('medium');
     $('ul.menu-applied').slideUp('medium'); 
  });


  $(".nav-applied").hover(function () {    
      $('ul.menu-basic').slideUp('medium');
      $('ul.menu-applied').slideDown('medium');
  });

#4

Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:

您的代码可以使用一些优化,但您基本上可以在不属于目标类的所有其他$(。menu-interior')元素上调用slideUp():

Example: $('.menu-interior:not(.menu-basic)').slideUp();

See forked fiddle here: http://www.bootply.com/DZxktgUtjh

请看这里的分叉小提琴:http://www.bootply.com/DZxktgUtjh

Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.

注意:这将关闭任何其他打开菜单,而不必在菜单增长时对所有其他类进行硬编码。

#5

So set an class="isHovered" on the element that is hovered. Set the boxes class="isHovered" aswell ..

因此,在悬停的元素上设置class =“isHovered”。设置框class =“isHovered”以及..

If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...

如果再次调用hover,或者让我们说mouseenter,你检查当前框和另一个框上是否设置了isHovered ...或者迭代任何可能存在的框...

You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...

您还可以将当前悬停的元素id存储在变量和框ID中。然后使用这些值。由于JS不是多线程的,你可以依赖执行的顺序......

#1