文章/答案/技术大牛

发布

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 {
            list-style: none;
            padding: 0;
        }
        .menu li {
            display: inline-block;
            position: relative;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#">菜单1</a>
            <ul class="submenu">
                <li><a href="#">子菜单1-1</a></li>
                <li><a href="#">子菜单1-2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单2</a>
            <ul class="submenu">
                <li><a href="#">子菜单2-1</a></li>
                <li><a href="#">子菜单2-2</a></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').slideDown(200);
                },
                function() {
                    $(this).find('.submenu').slideUp(200);
                }
            );
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：下拉菜单不显示或显示异常

原因：

CSS 样式问题：可能是 .submenu 的 display 属性设置不正确。
jQuery 选择器问题：可能是选择器没有正确选中目标元素。
JavaScript 错误：可能是 jQuery 代码中存在语法错误或逻辑错误。

解决方法：

检查 .submenu 的 CSS 样式，确保 display 属性在默认情况下是 none。
确保 jQuery 选择器正确选中目标元素，例如使用 .menu > li 选择一级菜单项。
检查 jQuery 代码，确保没有语法错误或逻辑错误。

问题：下拉菜单动画效果不流畅

原因：

浏览器性能问题：低性能的浏览器可能无法流畅地执行动画效果。
CSS 动画冲突：可能是其他 CSS 动画影响了下拉菜单的动画效果。

解决方法：

确保浏览器是最新版本，并且性能良好。
检查是否有其他 CSS 动画影响了下拉菜单的动画效果，可以尝试禁用其他动画进行排查。

通过以上方法，可以有效解决 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> <

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

1回答

滚动时的jQuery下拉菜单位置

、、

我是新接触jQuery和学习jQuery概念的。目前，我正在尝试设计一个自定义下拉菜单，其中有很长的列表项。当鼠标移到主菜单上时，我想滚动菜单。我正在尝试使用jquery滚动菜单来自定义CSS，它用新的外观和感觉描述了。有没有人能

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

回答已采纳

2回答

ASP.NET MVC -级联下拉循环引用错误

我有三个班级: MainMenu、SubMenu和二级SubMenu。我有一个级联下拉框，在创建二级菜单时使用。选择主菜单，然后显示带有子菜单的下拉列表。当我在MainMenu下拉框中选择一个项目时，我得到一个错误： System.InvalidOperationException:序列化'System.Reflection.Module‘类型的对象时检测到循环引用

浏览 1提问于2009-05-01得票数 1

1回答

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

、、、、

我正在Drupal usiong上建立一个网站，这是一个基于禅宗主题的自定义主题，并使用漂亮的菜单模块来生成一个水平的suckerfish的儿子下拉菜单。我的水平漂亮的菜单块在所有浏览器中都能出色地工作(甚至在IE!)但似乎在firefox中崩溃了，这是非常不寻常的。二级菜单应该直接下拉到顶层菜单项的正下方，除了firefox (我目前使用的是9.0.1)之外的所有浏览器都是这样的。当我在firefox中打开二级菜单

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

1回答

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

、、

有人能帮我解决我下拉菜单中的切换问题吗？我放慢了动画的速度，只是为了观看。}).mouseleave(function () {

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

回答已采纳

3回答

下拉菜单的可用性

、、、

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

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

回答已采纳

1回答

移动菜单项的位置

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

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

1回答

如何更改下拉子菜单的二级背景？

、、、、

如何更改下拉子菜单第二级背景？我尝试使用背景.sf- header#top .sf-menu li a{背景颜色：#058486！重要；}，但它不起作用。你可以在上查看网站，你可以将鼠标悬停在产品菜单上，然后你会看到2个子菜单级别。我只想改变二级子菜单的背景。

浏览 53提问于2016-09-07得票数 0

回答已采纳

3回答

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

、

我设计了一个二级CSS下拉菜单.除了一件事外，一切都很完美。我希望这样，当我悬停在顶部的菜单项上时，第一层下拉菜单就会出现，当我悬停在第一级菜单中的项目按下时，第二级菜单项就会出现。但问题是，当我悬停在顶部菜单上时，所有的子菜单都会出现。这意味着display: none不能工作。为什么会发生这种情况，解决办法是什么？

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

回答已采纳

1回答

如何将下拉菜单居中？

、、、、

我已经按我想要的方式设置了导航菜单(top nav = main-nav)，但是我一直想不出一种方法来将下拉菜单(第二级导航)居中对齐到其父导航项目，而不影响当前的布局或功能。导航列表很难用中间的菜单设置，而且通过Wordpress仍然是动态的。我使用了display:table和display:table-cell的组合来完成此操作。导航的顶层看起来很棒，但下拉的二级却不对齐。任何建议都将不胜感激。提前感谢！干杯,

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

4回答