Question

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

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

请在此处查看我的小提琴：http://www.bootply.com/uEKWCdNj4C

我已经查看了其他问题，而且这个问题似乎可能有用，但我在将其应用到我的情况时遇到了麻烦：Vertical Menu to stay open on hover then close when another is hovered

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

Answer 1

您可以在打开//check your sharedPreferences data first and if empty try to login // else move to next activity之前致电slideup，然后再拨打ul。如下所示

slidedown

Answer 2

因此，在悬停的元素上设置class="isHovered"。设置框class="isHovered"以及..

如果再次调用hover，或者说mouseenter，则检查当前框和另一个框上是否设置了isHovered ...或者在那里的任何框中迭代可能是......

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

Answer 3

您只需更新脚本即可调用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');
  });

Answer 4

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

示例：$('.menu-interior:not(.menu-basic)').slideUp();

请参阅此处的分叉小提琴：http://www.bootply.com/DZxktgUtjh

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

Answer 5

 $(document).ready(function() {

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

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

 });

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

5 个答案: