悬停或点击jquery下拉菜单

我有一个菜单，看起来像下面的一个。我希望一级孩子在悬停或点击时出现（所以它也适用于iPad）。当悬停（或点击）第一级孩子时，我想要它的二级孩子出现，如果他们存在。在悬停或单击不同的DOM元素时，应该再次隐藏所有子菜单。悬停或点击jquery下拉菜单

另外，当用户在页面上时，我想要菜单折叠出来，直到他将鼠标悬停在另一个菜单项上或点击不同的菜单项，以便他总能看到他在导航中的位置。

我在Wordpress中构建了一个朋友，他应该能够使用后端创建和更改其导航菜单。因此，将某些类或ID添加到某些元素不是一种选择。

<style> 
.sub-menu {display: none;} 
</style> 


<ul class="menu"> 
    <li>child 1 
    <ul class="sub-menu"> 
     <li>child 1.1 
     <ul class="sub-menu"> 
      <li>child 1.1.1</li> 
      <li>child 1.1.2</li> 
     </ul> 
     </li> 
     <li>child 1.2 
     <ul class="sub-menu"> 
      <li>child 1.2.1</li> 
      <li>child 1.2.2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li>child 2 
    <ul class="sub-menu"> 
     <li>child 2.1</li> 
     <li>child 2.2</li> 
    </ul> 
    </li> 
</ul>

这就是我想出来的，但它不起作用。当鼠标悬停在1.1和1.2的兄弟姐妹上时，

$("ul.menu li").hover(function() { 
    $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
}); 

$("ul.menu li ul.sub-menu").hover(function() { 
    $(this).find("ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
});

来源

2012-07-04 WhoMe

只是一个评论，iPad将如果您的菜单中的主要选项不会在任何地方重定向，则将悬停操作转换为点击操作l显示你的菜单，所以如果你的菜单要以这种方式工作，不要麻烦做两个动作（悬停和点击） – Paradise

通过直接针对ul

解决方案请尝试以下解决方案的一个：

// previous (following) is very inefficient and slow: 
// -- $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
// Rather, target the exact ULs which are Direct Children 

$("ul.menu").find('li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').slideUp(); 
     // If something Slides Down, it should slide up as well, 
     // instead of plain hide(), your choice - :) 
    } 
);

解决方案B：

更多精密在两个上行线路

更新：溶液A工作得很好，使乙冗余

$("ul.menu").find('> li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
); 

$("ul.sub-menu").find('> li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
);

检查Fiddle

来源

2012-07-04 17:11:56

以上解决方案的JS小提琴 - http://jsfiddle.net/OMS_/XDkXq/ –

只需很少的代码即可完美工作。谢谢 – WhoMe

这是未经测试..你必须扩大一点。

$('ul.menu li').siblings('ul:first-child').on('click', function() { 
if($(this).is(':visible')) { 
    $(this).hide(); 
} 
else { 
    $(this).show(); 
} 
}) 

$('ul.menu li').siblings('ul:first-child').hover(
function() { 
    $(this).show(); 
}, 
function() { 
    $(this).hide(); 
} 
)

编辑：正如我看到你的结构不一致。有时候，你放置一个列表在锂元素，有时它被作为一个兄弟......

来源

2012-07-04 16:00:42 Daniel

使用$（this）.toggle（）点击而不是显示/隐藏和条件。 – iurisilvio

我编辑了结构以保持一致。谢谢。 – WhoMe

悬停或点击jquery下拉菜单

回答

相关问题