悬停或单击时的 Jquery 下拉菜单

Posted 2023-05-08

【中文标题】悬停或单击时的 Jquery 下拉菜单

【英文标题】：Jquery dropdown menu on hover or on click

【发布时间】：2012-07-05 03:29:19

【问题描述】：

我有一个如下所示的菜单。我希望第一级孩子出现在悬停或点击时（因此它也适用于 iPad）。当悬停（或单击）一个一级子级时，我希望它是二级子级（如果存在）。在悬停或单击不同的 DOM 元素时，所有子菜单都应再次隐藏。

此外，当用户在页面上时，我希望将菜单折叠起来，直到他将鼠标悬停在或单击不同的菜单项，以便他始终可以看到他在导航中的位置。

我在 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.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(); 
);

【问题讨论】：

只是一个评论，ipad 会将悬停动作变成点击动作，如果你的菜单中的主要选项没有重定向到任何地方，它将显示你的菜单，所以如果你的菜单可以工作方式不要费心做这两个动作（悬停和点击）

【参考方案1】：

通过直接定位ul尝试以下解决方案

解决方案 A：

---

//  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：

---

在两个 UL 上获得更高的精度

更新：解决方案 A 工作正常，使 B 变得多余

$("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

【参考方案2】：

这是未经测试的..你必须扩展一下。

$('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();

)

编辑：我看到你的结构不一致。有时您将列表放在 li 元素中，有时将其作为兄弟元素放置...

【讨论】：

在点击时使用 $(this).toggle() 而不是显示/隐藏和条件。