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>
        .menu {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .menu li {
            position: relative;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 0;
        }
        .menu li:hover .submenu {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>菜单1
            <ul class="submenu">
                <li>子菜单1-1</li>
                <li>子菜单1-2</li>
            </ul>
        </li>
        <li>菜单2
            <ul class="submenu">
                <li>子菜单2-1</li>
                <li>子菜单2-2</li>
            </ul>
        </li>
    </ul>

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

遇到的问题及解决方法

问题：子菜单在悬停时显示，但在鼠标移开后不隐藏

原因：可能是由于事件绑定不正确或 CSS 样式问题导致的。

解决方法：

检查事件绑定：确保使用 hover 方法正确绑定了鼠标悬停和移开的事件。
检查 CSS 样式：确保子菜单的 display 属性在默认情况下是 none，并且在悬停时能够正确显示。

$(document).ready(function() {
    $('.menu li').hover(
        function() {
            $(this).find('.submenu').show();
        },
        function() {
            $(this).find('.submenu').hide();
        }
    );
});

通过以上方法，可以确保二级横向菜单在用户悬停时显示子菜单，并在鼠标移开后隐藏子菜单。

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

有帮助

没帮助

横向切换导航无法滚动

、、

在横向视图中，我有一个移动导航，可以打开，但不能向下滚动查看更多菜单选项。当导航完全关闭时，这在某种程度上是可以的，但是我在一个项目上进行了二级切换，从而阻止了我向下滚动。它的样式并没有什么特别之处-- jQuery会在汉堡菜单图标上打开/关闭，并通过“太阳能服务”链接来打开它。菜单打开

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

1回答

(CSS)只有一个子的二级水平菜单

、

我有这样的菜单： <li>item 1</li> <ul> <li</ul> <ul> <li>item-only-child</li>

浏览 2提问于2013-06-18得票数 0

1回答

在现有jQuery折叠下拉菜单的内容上添加下拉框，该下拉框可将内容向下推

、、、、

我正在尝试找到一种方法，有一个二级下拉菜单位于一个风格的下拉菜单下的内容的顶部。jQuery accordion style下拉菜单故意下拉下面的内容；但是，我不希望第二级下拉菜单下拉下拉内容。我不管它是不是更像jQuery，，，，诸如此类的东西。这个页面上的主导航就是我想要找到的解决方案：

浏览 2提问于2011-04-05得票数 1

1回答

jquery飞出菜单:当光标移动到同级时，使父li保持相同的颜色。

、、

我有一个，其中的“二级菜单3”是一个飞出。菜单由CMS系统生成，因此限制将新类直接添加到特定菜单项。默认情况下，第一级菜单有一个“顶级”类作为锚标记，而第2层和第3层则没有。我想要实现的是以“顶层”为目标，找到“二级菜单3”以添加“当前”类，这样当“飞出”菜单展开，光标移动到第三级时，“二级菜单3”具有与悬停相同的白色背景颜色。代码是jQuery('#nav‘).find(’>na

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

1回答

我希望能够使一系列的下拉菜单，本身就是由下拉菜单填充。当用户更新其中一个基本选择时，我只想在所选的选择发生更改的情况下更改辅助选择。1-4中选择他们想要的任何内容，然后在菜单5- 7中选择他们想要的内容。然后，当他们更改前4个菜单中的任何一个选择时，该更改将根据需要通过菜单5-7动态填充(这两个选项都是新的下拉选择选项，如果它被选中，则替换该选项)。我可以做上面的工作，但它是通过暴力强制的html，并且每当一个基本选项被“更新”时，它将所有的二级菜单重置为默认的……因此

浏览 2提问于2018-06-02得票数 0

1回答

如何使用css从顶部修复下拉菜单？

、

我想做一个下拉菜单，就像在中，只有css没有jquery，特别是所有类别的菜单。我试过css下拉菜单，但问题是我无法修复顶部的二级菜单。任何建议都将不胜感激。

浏览 7提问于2012-08-30得票数 0

回答已采纳

1回答

Superfish下拉菜单不出现在IE6中

、

我使用的是本例中的superfish菜单： (带有Supersubs)。它在所有浏览器中都能很好地工作，甚至在ie6中也是如此！当我把它复制到我的项目中时，一切看起来都很好，但仅仅是IE6就会出问题。我甚至尝试了相同的jquery版本(如示例)。这是我的菜单：你们知道哪里出问题了吗？谢谢!

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

回答已采纳

3回答

在Drupal7的自定义页面上显示二级菜单

、、

我有一个自定义页面，其链接是在二级菜单页面。当用户转到自定义页面时，二级菜单将隐藏。因此，要返回二级菜单页面，用户需要首先单击主菜单，然后单击二级菜单。我想使二级菜单在该自定义页面上可见，以便用户可以直接单击二级菜单。我该怎么做呢?？

浏览 23提问于2018-02-23得票数 0

1回答

手机菜单-如何直接显示二级菜单？

、

配置: Drupal 7，tb corpal主题，超级鱼类菜单📷 在“主菜单”级别之后，我需要更改什么才能直接到达“二级”？

浏览 0提问于2015-07-12得票数 1

1回答

多级子菜单在点击时不关闭子菜单

、、、、

现在我正在做一个基于点击而不是悬停的多级子菜单。我在打开另一个子菜单时关闭子菜单时遇到问题。打开另一个子菜单时，必须关闭所有二级子菜单。jQuery('.navigati

浏览 1提问于2017-10-03得票数 0

1回答

仅单击引导程序中的2级下拉菜单

、

我试图强制嵌套下拉菜单没有悬停。目前，下面的代码只显示嵌套下拉菜单上的激活与悬停。我只想强迫它只点击，以便在移动版本的网站，它会造成任何问题。

浏览 0提问于2013-04-22得票数 1

3回答

检测web下拉菜单是否要在屏幕外显示

、、、、

我有一个基于CSS的多层次的简单下拉菜单。第二级或第三级可能位于可见窗口之外，具有分辨率和窗口大小的特定组合。一些预置的菜单控件如果检测到这种情况，就会向左而不是向右打开下拉菜单。如何(使用JS/jQuery)测试这种情况？

浏览 2提问于2010-06-22得票数 4

1回答

我们可以在spritekit中更改SKScene中的InterfaceOrientations吗？

、、

一些关卡处于横向模式，一些关卡处于纵向模式。由于第一层处于横向模式，因此当我调用第一个SKScene时，我将视图控制器设置为{}在进阶时谢谢。

浏览 0提问于2013-11-26得票数 1

1回答

多级菜单激活激活

、

一级菜单： <li><a id="new">a</a></li></ul> <ul> <li&

浏览 1提问于2013-09-20得票数 0

1回答

嵌套菜单项的jQuery hasClass

、、、

我正在尝试更多地理解jQuery，今天我尝试使用菜单结构。目前，我的菜单有三个层次，现在我试图让‘子菜单项’隐藏，直到访问者点击第二个层次的菜单项。我的jQuery函数用于添加和删除“nav”类，它适用于第一级和第二级菜单项，但我仍在研究如何进一步扩展该函数，以考虑到第三级菜单项、第四个菜单项等。removeClass('nav-open'); $(this).addClass('

浏览 3提问于2014-03-10得票数 3

回答已采纳

2回答

我的Drupal二级菜单没有出现在任何地方

我已经设置了我的二级菜单来显示在“侧边栏优先”区块。我假设的是，当我从我的主菜单(我将其重命名)中选择了一些东西时，二级菜单就会出现。事实并非如此。我已经打开了二级菜单，并且我正在使用最新的Drupal6版本。看一看。。在顶部的Software Development菜单下，我有一个二级菜单。当我选择该菜单时，左边的“第一个侧边栏”块是空的。

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

回答已采纳

1回答

JQuery -防止多级下拉列表在悬停时消失

、、

我有一个下拉菜单与2个级别。将鼠标悬停在level 1上时，它会成功打开level 2，但是，当我的鼠标从level 1移动到level 2时，整个菜单都会消失。(下拉菜单显示在悬停状态) </a> </ul&g

浏览 3提问于2018-05-20得票数 0

1回答

Bootstrap子菜单放置错误

、、、

第二级子菜单被放置在第一级子菜单的第一元素旁边，当具有较少的第二级子菜单元素的第一级子菜单的较低元素时，由于鼠标悬停在菜单之外，用户不能导航到新的第二级子菜单。如何将第二级子菜单放在每个第一级子菜单所选元素的旁边？这里是JSFiddle，检查元素，并尝试导航到它们的子菜单:内存设备，打印机，笔记本电脑包，投影仪等。

浏览 1提问于2013-03-16得票数 1

回答已采纳

1回答