文章/答案/技术大牛

发布

jquery 二级下拉菜单

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。二级下拉菜单是一种常见的用户界面元素，通常用于展示具有层级关系的数据，如分类目录。

类型

二级下拉菜单通常有以下几种类型：

基于 CSS 的下拉菜单：通过 CSS 的 :hover 伪类实现。
基于 JavaScript 的下拉菜单：通过 JavaScript 监听事件并动态修改 DOM 实现。
基于 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>jQuery 二级下拉菜单</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button>菜单1</button>
        <div class="dropdown-content">
            <a href="#">子菜单1-1</a>
            <a href="#">子菜单1-2</a>
        </div>
    </div>
    <div class="dropdown">
        <button>菜单2</button>
        <div class="dropdown-content">
            <a href="#">子菜单2-1</a>
            <a href="#">子菜单2-2</a>
        </div>
    </div>

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

常见问题及解决方法

下拉菜单不显示：
- 原因：可能是 CSS 样式问题，或者 jQuery 代码未正确加载。
- 解决方法：检查 CSS 样式是否正确应用，确保 jQuery 库已正确引入。

下拉菜单显示位置不正确：
- 原因：可能是 position 属性设置不当。
- 解决方法：调整 .dropdown-content 的 position 属性，确保其相对于父元素正确定位。
下拉菜单响应慢：
- 原因：可能是 DOM 操作过多或 JavaScript 代码效率低。
- 解决方法：优化 JavaScript 代码，减少不必要的 DOM 操作，使用事件委托等技术提高性能。

通过以上示例和解决方法，你应该能够实现一个基本的 jQuery 二级下拉菜单，并解决常见的相关问题。

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

有帮助

没帮助

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

、、、、

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

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

1回答

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

、

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

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

回答已采纳

3回答

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

、、、、

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

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

1回答

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

、、

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

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

3回答

下拉菜单的可用性

、、、

有没有办法为客户增加下拉菜单的可用性，比如在用户将鼠标移到他们不想要的区域上时，会在两者之间引入一些延迟，或者对于宽菜单，可以通过计算鼠标移动的角度或猜测用户的意图来使用户更容易到达第二级，这样他们在尝试访问第二级下拉菜单时就不会感到沮丧

浏览 4提问于2012-08-15得票数 0

回答已采纳

1回答

多级下拉菜单有切换问题。

、、

有人能帮我解决我下拉菜单中的切换问题吗？我放慢了动画的速度，只是为了观看。}).mouseleave(function () {});第二级函数是相同的，除了“顶层”的每一

浏览 1提问于2014-07-14得票数 1

回答已采纳

1回答

移动菜单项的位置

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

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

2回答

带有jquery二级的下拉菜单

我试图用jquery创建一个垂直下拉菜单，但我不知道为什么会发生这种情况。//jQuery $("#nav ul li").has("> .sub-nav").click

浏览 2提问于2015-06-08得票数 0

回答已采纳

1回答

滚动时的jQuery下拉菜单位置

、、

我是新接触jQuery和学习jQuery概念的。目前，我正在尝试设计一个自定义下拉菜单，其中有很长的列表项。当鼠标移到主菜单上时，我想滚动菜单。我正在尝试使用jquery滚动菜单来自定义CSS，它用新的外观和感觉描述了。有没有人能检查一下小提琴并改正？另外，请让我知道我哪里做错了，这样我以后会试着改正自己。提前谢谢。:)

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

回答已采纳

3回答

2级CSS下拉菜单-显示:无不工作

、

我设计了一个二级CSS下拉菜单.除了一件事外，一切都很完美。我希望这样，当我悬停在顶部的菜单项上时，第一层下拉菜单就会出现，当我悬停在第一级菜单中的项目按下时，第二级菜单项就会出现。

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

回答已采纳

1回答

超级插件调整-也向父li元素添加了“当前”类。

、、

我正在使用一些软件构建一个站点，该软件可以生成一组分层嵌套的列表，然后使用superfish jquery插件将其转换为下拉菜单。我遇到的问题是，如果我在第二级页面上，并且需要将一个活动类应用到父级，那么上述软件只会应用一个活动类(在任何一个页面/元素当时是活动的)。是否有一种方法来获取包含类=‘active’的列表的父li元素？

浏览 4提问于2011-07-25得票数 0

回答已采纳

4回答

在纯css下拉菜单中解决问题

、

我最近使用Google tutorials创建了一个纯css下拉菜单。如果我给第二级ul留出一个小的空白处，当你在ul和parent li之间的间隙上悬停时，下拉菜单就会消失。

浏览 1提问于2012-09-17得票数 2

回答已采纳

1回答

CSS/HTML:如何使用下拉菜单

、、

我正在制作一个测试站点，并且没有下拉菜单。它看起来像这样：但是，现在我想将简单的下拉列表添加到"serwery“中。我的代码出了什么问题？<!

浏览 2提问于2014-01-04得票数 0

2回答

CSS:菜单元素的定位

、

上面的图片是我的html的结果： <ul> <li>...</li> <li>...</li> <li>

浏览 2提问于2015-07-22得票数 0

回答已采纳

1回答

默认情况下展开下拉菜单(在首页)

、、、

对于本站，用户似乎很难找到可以通过左上角的“数据”下拉菜单访问的网站内容。编辑：非常感谢user49916！这行得通！我遇到的问题是，在默认情况下，第二级孩子也被扩展了。

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

回答已采纳

1回答

规避TYPO3后端中的访问限制

我在一个用typo3制作的网站中创建多级下拉菜单时遇到了麻烦。我创建了页面，并按层次结构对它们进行了组织，但下拉菜单的第二级没有出现。

浏览 2提问于2018-09-25得票数 1

1回答

如何在菜单结构为数组类型时创建下拉菜单？

、

例如Bartik，fontfolio等如何在drupal page.tpl中编辑这一点？因为我是德鲁巴的新手，请给我建议一下。

浏览 0提问于2015-09-10得票数 0

4回答

php下拉菜单填充

、、

我正在尝试写一个php脚本，它将填充第二个下拉菜单的基础上的一个主要下拉菜单的选择。我想使用jquery来做所有非页面刷新的事情。

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

1回答

Django -如何动态限制博客帖子的类别？

、、

我想为这些职位设置一级和二级职类。例如,当我创建一个新的帖子时，我想根据我选择的主要类别限制次要类别的选择。(准确地说，在post创建表单中，首先，我希望主类别和二级类别都显示在下拉菜单中，其次，在选择主类别之后，我只想要属于我选择的次要类别的次要类别选择，这些选择将显示在二级类别的下拉菜单中。), class Meta:

浏览 4提问于2018-11-25得票数 0

1回答

使用drupal zen主题和漂亮菜单的Firefox渲染问题

、、、、

我正在Drupal usiong上建立一个网站，这是一个基于禅宗主题的自定义主题，并使用漂亮的菜单模块来生成一个水平的suckerfish的儿子下拉菜单。二级菜单应该直接下拉到顶层菜单项的正下方，除了firefox (我目前使用的是9.0.1)之外的所有浏览器都是这样的。当我在firefox中打开二级菜单时，二级菜单显示在第一级菜单的下方(正如它应该显示的那样)，但与其父菜单的左侧对齐，而不是在其父菜单项的下方对齐。有什么想法吗？下面是url：

浏览 0提问于2012-02-01得票数 1

点击加载更多