文章/答案/技术大牛

发布

jquery无限级下拉菜单

基础概念

jQuery无限级下拉菜单是一种使用jQuery库实现的多层级导航菜单。这种菜单允许用户通过点击或悬停来展开子菜单项，且子菜单项可以无限嵌套，形成多层次的下拉结构。

类型

基于悬停的下拉菜单：用户将鼠标悬停在父菜单项上时，子菜单项会展开。
基于点击的下拉菜单：用户点击父菜单项时，子菜单项会展开。
混合模式：结合悬停和点击两种方式。

应用场景

网站导航：适用于大型网站，提供多层次的导航结构。
电子商务平台：帮助用户快速找到产品类别和子类别。
内容管理系统：提供灵活的菜单结构，方便管理大量内容。

示例代码

以下是一个简单的基于jQuery的无限级下拉菜单实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Level Dropdown Menu</title>
    <style>
        .menu {
            list-style: none;
            padding: 0;
        }
        .menu li {
            position: relative;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 0;
            left: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>Menu 1
            <ul class="submenu">
                <li>Submenu 1.1</li>
                <li>Submenu 1.2
                    <ul class="submenu">
                        <li>Submenu 1.2.1</li>
                        <li>Submenu 1.2.2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Menu 2</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').stop(true, true).slideDown();
            }, function() {
                $(this).find('.submenu').stop(true, true).slideUp();
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

子菜单不展开：
- 原因：可能是jQuery库未正确加载或选择器错误。
- 解决方法：确保jQuery库已正确引入，并检查选择器是否正确。

子菜单展开后无法收起：
- 原因：可能是事件绑定错误或CSS样式问题。
- 解决方法：确保事件绑定正确，并检查CSS样式是否影响了子菜单的显示和隐藏。
菜单在移动设备上表现不佳：
- 原因：可能是响应式设计不足或触摸事件处理不当。
- 解决方法：使用媒体查询优化移动端显示，并确保触摸事件正确处理。

通过以上示例和解决方案，您可以实现一个功能完善的无限级下拉菜单，并解决常见的开发问题。

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

有帮助

没帮助

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

、、、、

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

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

1回答

下拉菜单:使用jQuery在Hover上无限滑行

、、、、

我用jquery创建了一个简单的下拉菜单。如果我把馆长从B页慢慢地移到右边(见图)，那么下拉菜单就会关闭，因为李不会在短时间内悬停。如何防止下拉菜单立即关闭？ });虽然它改进了一些东西，但上面的问题

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

回答已采纳

1回答

Wicket异步作业

、、

我有一个页面，在这个页面上我加载了更多的选择列表，其中有许多从数据库填充的值。<option1>Value1</option><option1000>Value1000</option>谢谢。

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

回答已采纳

3回答

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

、、、、

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

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

1回答

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

、

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

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

回答已采纳

4回答

悬停在父元素上时，显示子元素(下拉导航)

、、、、

基本上，我只想让我的下拉菜单在您将鼠标悬停在父元素上时起作用。额外的css将被用来使它更漂亮，定位更好。

浏览 2提问于2013-01-20得票数 0

回答已采纳

2回答

jquery悬停菜单fadein/hide下拉菜单

、、、、

我有一个小的jquery $(this).children('.dropdown').fadeIn(250); $(this).children('.dropdown').hide();当它的父级LI悬停在其上时，它会淡入并隐藏每个菜单下拉菜单。我不相信这

浏览 0提问于2013-02-13得票数 0

3回答

使用jquery将单层菜单转换为多级下拉菜单

、、

我刚刚用jquery开发了一个单级下拉菜单..。如何重构相同的代码，使其成为多级下拉菜单.$(document).ready(function() {$("#Programming

浏览 6提问于2010-07-22得票数 3

回答已采纳

1回答

Bootstrap nav下拉菜单切换问题

、

我已经添加了一个小的jquery代码，当我按下移动切换菜单时，它将自动关闭并前往目的地if (jQuery(".navbar-collapse a

浏览 1提问于2015-06-15得票数 0

1回答

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

、、

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

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

1回答

下拉菜单不适用于引导程序版本3.4.1和jQuery3.0.0

、、

根据这个，Bootstrav3.4.1与JQuery v3兼容，但是在我将JQuery从2.24升级到3.4.1之后，下拉菜单就停止工作了。下面是包含下拉菜单的代码：<a href="#" class="dropdown-toggle" data-toggle="dropdown">System

浏览 0提问于2019-05-18得票数 0

回答已采纳

1回答

按内容类型和分类法分类/排序的D7 jquery下拉菜单

、、、、

在D7中，我希望通过视图创建一个jquery下拉菜单，按内容类型(第一级)和(如果内容类型有分类法标记)进行分类/排序。什么是最好的方法？索尼克斯！

浏览 0提问于2012-07-16得票数 1

回答已采纳

2回答

如何在html和css中点击链接制作下拉菜单

、、

我试图使一个下拉菜单使用HTML和CSS只。我的页面上有一组链接/按钮(任何人都可以)。当我点击它们时，我想要一个3级的下拉菜单显示出来。所以当我点击它们时，所有的链接都会有这个功能。我知道如何使用jquery完成此操作，但我想知道如何仅使用HTML和CSS来完成此操作。谢谢!

浏览 1提问于2014-02-04得票数 0

1回答

移动菜单项的位置

第三级菜单与下拉菜单重叠。目标？第三级菜单应该放在下拉菜单之外。What到目前为止，我尝试过了吗？我只是在浏览器中的Modus中将内联css添加到了第二个菜单级别。ÖffentlichkeitsarbeitHow我可以更改javascript以只为第二级菜单添加css类.open吗？jQuery(function($) { $('.navbar

浏览 0提问于2019-08-10得票数 1

1回答

jQuery代码多点下拉菜单有错误，请告知？

、、、

我正在为网站下拉菜单开发这个jQuery脚本方法。我在代码中遇到了一个似乎无法通过的小问题。支持根级菜单中的多个下拉菜单。如果我

浏览 0提问于2016-12-27得票数 4

回答已采纳

1回答

jQuery超时功能不工作

、、

我正在使用jQuery编写一个当前正在处理的下拉菜单。我遇到了一个问题，超时功能根本不起作用。removeClass("tap"); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

浏览 4提问于2017-02-13得票数 0

回答已采纳

1回答

子导航侧边栏或显示子项的下拉导航

、、

从主导航菜单中下拉菜单，或一些关闭选项。在侧栏中显示该页的所有子级。

浏览 0提问于2012-03-27得票数 1

回答已采纳

3回答

我已经做了一个简单的下拉菜单，这很好用，但我想在按钮和下拉菜单之间添加一些空间(在底部按钮/链接和顶部下拉菜单之间)。问题是，如果我不在按钮和下拉菜单之间添加空格，它可以正常工作，但一旦我在它们之间添加空格，下拉菜单就会在我离开按钮时返回隐藏状态。那么，如果我悬停它的父级li，下拉菜单之间留有空格，我该如何保持下拉菜单的活动状态呢？jQuery代码 $('#sub-menu li').hover(

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

回答已采纳

1回答

更改ui主题的颜色和鼠标点击鼠标结束？

我有一个使用FGMenu的下拉菜单，它使用jquery。我可以在UI主题中更改下拉列表的默认颜色，这样它将默认为蓝色而不是灰色？当前的下拉设置是当您单击父标题时，如何更改为鼠标以显示父级的子类。这是链接。

浏览 3提问于2009-08-13得票数 1

1回答

具有自适应宽度的子菜单

、、、、

我有一个下拉菜单，里面有很多子层次。我做了一个简单的4个层次的例子。因为菜单是在一个边栏en也应该是方便的较小的移动设备，我想保持总宽度限制。所以当我用鼠标进入3级时，第1级和第2级的宽度会自动变窄。<html lang="en"> <link rel="stylesheet" href="/&#

浏览 0提问于2016-08-07得票数 1

回答已采纳

点击加载更多