jquery 三级导航

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。三级导航通常指的是一个包含三个层级的导航菜单，例如：主菜单 -> 子菜单 -> 子子菜单。

类型

三级导航可以通过多种方式实现，常见的有：

下拉菜单：点击主菜单项时，显示子菜单；点击子菜单项时，显示子子菜单。
侧边栏导航：通过侧边栏的形式展示多级菜单。
面包屑导航：显示当前页面的路径，类似于网站导航的历史记录。

应用场景

三级导航常用于：

大型网站：帮助用户快速找到所需信息。
电商平台：展示商品分类和子分类。
企业官网：展示公司结构和业务范围。

示例代码

以下是一个简单的 jQuery 三级导航实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 三级导航</title>
    <style>
        .nav {
            list-style: none;
            padding: 0;
        }
        .nav li {
            display: inline-block;
            margin-right: 10px;
        }
        .sub-menu, .sub-sub-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            主菜单1
            <ul class="sub-menu">
                <li>
                    子菜单1-1
                    <ul class="sub-sub-menu">
                        <li>子子菜单1-1-1</li>
                        <li>子子菜单1-1-2</li>
                    </ul>
                </li>
                <li>子菜单1-2</li>
            </ul>
        </li>
        <li>主菜单2</li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.nav > li').hover(function() {
                $(this).find('.sub-menu').show();
            }, function() {
                $(this).find('.sub-menu').hide();
            });

            $('.sub-menu > li').hover(function() {
                $(this).find('.sub-sub-menu').show();
            }, function() {
                $(this).find('.sub-sub-menu').hide();
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

菜单不显示：
- 原因：可能是 jQuery 库未正确加载，或者选择器写错了。
- 解决方法：检查 jQuery 库的路径是否正确，确保选择器与 HTML 结构匹配。

菜单显示位置不正确：
- 原因：可能是 CSS 样式设置不当，导致菜单定位错误。
- 解决方法：检查 .sub-menu 和 .sub-sub-menu 的 position 属性，确保它们正确地定位在父元素下方。
菜单闪烁：
- 原因：可能是鼠标快速移动导致的事件触发频繁。
- 解决方法：使用 mouseenter 和 mouseleave 事件代替 hover，或者添加防抖动（debounce）处理。

通过以上示例和解决方法，你应该能够实现一个基本的三级导航菜单，并解决常见的显示问题。

页面内容是否对你有帮助？

有帮助

没帮助

jQuery accordion menu -保持accordion菜单打开到我所在的页面

、、

我对jQuery非常陌生，正在为我的侧边导航开发一个五六级的手风琴菜单。到目前为止，我从Dane Peterson @ daneomatic.com获得了大部分代码(谢谢Dane!)。但是，我被一件事卡住了：当我向下导航到，比如说，第三级，并单击链接打开链接到该级别的页面时，一旦加载了第三级页面，我如何指示我在该页面上？

浏览 0提问于2009-10-22得票数 11

1回答

实现多级深度链接

、

我理解了它的基本概念，并且已经为我的顶级导航实现了深度链接。问题是我的网站有多个层次。用户可以点击顶部的导航，这增加了散列，然后点击第二个导航和第三个导航。我还需要将这个二级和三级导航点击添加到hash...and中，然后还可以在用户单击主要导航项目时删除该项目。我想不出一种方法来做this...any的想法？哦，我用来在主nav上实现散列的代码(jQuery)是： var hashH

浏览 3提问于2011-02-03得票数 0

回答已采纳

1回答

航行被切断

、

三级导航系统被切断了。我尝试过操纵CSS来解决这个问题，但没有效果。在框架中没有选择。我的解决办法是把第三级导航器推到左边而不是右边。

浏览 2提问于2014-11-10得票数 0

回答已采纳

1回答

WordPress二十四主题三级翻转在小型显示器上退出屏幕

、

我有一个客户谁想在主导航的3个级别的导航。(出于可访问性的原因，不建议这样做。)问题是，第三级位于第二级的右侧，当屏幕宽度约为1000像素或更小时，第三级会从屏幕上消失。

浏览 0提问于2014-11-13得票数 0

2回答

SharePoint2010 GlobalNavigation

、

我请求一个具有三级导航的客户端，并希望使用全局导航来设置站点settings>navigation.(/_layouts/AreaNavigationSettings.aspx)中的导航链接。谢谢你的答复:)因此，对于导航，我们会有这样的东西：- About us (2nd level navigation)

浏览 0提问于2010-12-06得票数 0

回答已采纳

1回答

第三级嵌套导航重叠问题

、、

请帮帮我！除了这一个问题，我菜单中的所有内容都按我想要的方式工作。我的第三层嵌套列表项覆盖在第二层，我无法修复它。我已经试过我能想到的一切了，但我在这里碰壁了。我真的不想从头开始，因为我喜欢菜单的外观和感觉。/*navigation*/ width: 960px; font-family: "Source Sans Pro", sans-serif; position: ab

浏览 2提问于2013-11-08得票数 0

1回答

三级导航级

、、、、

我目前正在进行第三级导航。输出应该如下所示： Level 2 Level 3 是否有方法将自定义类添加到第三级列表中？

浏览 0提问于2019-01-24得票数 2

回答已采纳

1回答

jQuery导航-需要在孩子悬停时显示孙子链接- jsfiddle

、

我的导航90%正常工作，但一旦孩子(子导航)链接悬停，我就很难让我的孙子(第三级导航)显示出来。= null){hidemenu(lastopen);} lastopen = jQuery(this); showmenu(lastopen);}); jQuery(v(i,v){var width = 0; jQuery(v).find("ul li").each(function(ii,vv){width += <em

浏览 1提问于2013-01-19得票数 0

回答已采纳

1回答

顶点5.1 -导航菜单被重置为顶级菜单

、、、

在Oracle Apex 5.1中，我使用侧导航菜单作为主菜单。我有三个级别的导航：||当单击第三级导航菜单时，它会呈现页面，并将导航菜单重新设置为1级(隐藏2级和3级的子菜单)。我想保持3层导航崩溃时，点击第3层导航菜单。有人能告诉我实现这一目标的相关设置是什么吗？

浏览 1提问于2018-03-19得票数 1

回答已采纳

1回答

如何在MVVM项目中设计灵活的导航逻辑？

、、

现在的问题是，导航布局和逻辑的需求一直在变化。如今，导航逻辑是通过绑定在ViewModel中硬编码的。我想知道，有没有一个好的设计模式可以让这一切变得简单？例如，在顶部有一个水平条作为第一级导航，然后在左边有一个垂直的手风琴控件作为第二级和第三级导航，在主要区域上有一些CollapsiblePanels作为第四级导航。每当单击任何导航元素时，都会设置ViewModel属性，以便绑定触发视图刷新。我们的需求人员一直在改变关于业务逻辑部分(将其作为用户控件)应该在第一级、第

浏览 0提问于2011-12-05得票数 0

1回答

UINavigationController在iPad上不弹出UINavigationBar项目

、、、、

简而言之，问题是:我有一个导航控制器，我在它上面推了几个视图控制器。然后当点击“后退”按钮时，视图控制器会弹出，但相应的导航项不会弹出。如果我再次点击后退，则会弹出导航项。此外，只有在使用导航控制器导航栏中的后退按钮时才会发生这种情况。如果我显式调用popViewController (例如，通过按下按钮)，它将按预期工作。我知道这些信息远不足以得到具体的答案，但我只是想知道是否有人听说过导航控制器没有按预期弹出导航项目，这样我就可以有一些线索，知道下一步应该在哪里进行

浏览 1提问于2010-07-07得票数 1

回答已采纳

3回答

不带TabBar控制器的TabBar

、、、

我几乎完成了我的应用程序的编写，现在出现了一个新的需求，需要从第三个屏幕开始添加一个TabBar (JQuery中的导航栏)。下面是我的故事板的样子：现在，我需要我的第三级导航的标签栏(就像在故事板中一样)。如果我只是将这些视图嵌入到选项卡栏中，它会开始工作吗？

浏览 1提问于2012-10-15得票数 1

3回答

基于图像位置的视差效果

、、、

我遇到的问题是，对于我尝试过的大多数视差插件，浮动的第三级图像没有任何东西可以消失。这意味着，虽然我可以根据屏幕大小进行设置，但我看到它消失在一条看不见的线后面。

浏览 0提问于2012-06-25得票数 0

1回答

在sharepoint 2010中自定义导航

、

主菜单导航:主导航。它应该有所有的主标签。如果用户单击任何选项卡，则所选选项卡下的子网站应显示为辅助导航。通过单击辅助选项卡部分中的任何链接，所选选项卡的链接应显示在作为第三级导航的下拉列表中。

浏览 0提问于2011-05-03得票数 0

1回答

将缩略图添加到二级wordpress导航菜单

、、

我想知道有什么方法可以在wordpress导航菜单的二级子页中添加缩略图。下面是wordpress导航菜单的结构带标题的菜单第二级>>>缩略图请查看截图。简而言之，我想使相同的功能，我可以通过wp菜单选项控制。谢谢

浏览 3提问于2012-11-30得票数 3

回答已采纳

1回答

排列第三级下拉导航的问题

、、

我遇到了一个奇怪的问题，我的第三级导航与它的父导航项目在左边。当它冒出来的时候，它只是浮得太高了。

浏览 9提问于2019-08-13得票数 0

回答已采纳

2回答

Kentico V9 CSS列表菜单2和3页的网页

我以为我的左轨道导航工作，直到我增加了一些3级页。这是内务部的一个粗略分解。当我导航到1.3.1时，我松开了父节点页。以下是我在第三级页面(1.3.1)时导航器的外观：我偶然发现这篇文章，但它似乎对我不起作用：

浏览 2提问于2016-03-14得票数 0

回答已采纳

2回答

将鼠标悬停在第三级li上时，突出显示导航栏中的第二级li

、、

当悬停在导航栏的任何子级上时，我希望突出显示导航栏的第二级父级；顶级导航栏具有完全不同的样式，因此不适用于我试图执行的操作，所以当我将鼠标悬停在任何第三级项目上时，我希望设置第二级的样式。我知道javascript/jquery是解决这个问题的方法，所以由于我的技能还不够好，我遇到了一个难题。下面是我的标准html导航结构： <ul> <

浏览 11提问于2011-12-19得票数 2

回答已采纳

1回答