文章/答案/技术大牛

发布

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-item {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul class="menu">
        <li class="menu-item active">菜单1</li>
        <li class="menu-item">菜单2</li>
        <li class="menu-item">菜单3</li>
    </ul>

    <script>
        $(document).ready(function() {
            $('.menu-item').click(function() {
                $('.menu-item').removeClass('active');
                $(this).addClass('active');
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

jQuery 未加载：
- 问题：页面上没有引入 jQuery 库，导致 $ 符号未定义。
- 解决方法：确保在 HTML 文件中正确引入了 jQuery 库。

菜单项未正确切换：
- 问题：点击菜单项后，显示状态没有改变。
- 解决方法：检查 jQuery 选择器是否正确，确保事件绑定到了正确的元素上。
动画效果不明显：
- 问题：菜单切换时没有动画效果。
- 解决方法：使用 jQuery 的动画方法（如 fadeIn、slideUp）来实现动画效果。

$(document).ready(function() {
    $('.menu-item').click(function() {
        $('.menu-item').removeClass('active').slideUp();
        $(this).addClass('active').slideDown();
    });
});

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

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

有帮助

没帮助

Bootstrap3左边框右切换

、、、

我想用引导来开发一个web应用程序，我有一个左侧的侧边栏菜单。我希望菜单从右边切换，而这个页面是从手机浏览器打开的。

浏览 2提问于2016-04-05得票数 0

回答已采纳

2回答

用于滑动菜单的jQuery切换()

、、

我正在尝试使用jQuery实现切换选项。我有两种风格(子菜单图标和子菜单移动)。在单击“子菜单图标”类div时，我要切换“子菜单-移动”类div，使其从左向右、右向左切换。 top: 0px;} <script src="https://ajax.googleapis.com/ajax/libs/

浏览 0提问于2017-01-30得票数 0

回答已采纳

1回答

角/用户界面路由器或指令，用于切换子菜单内容

、、

两个具有类似行为的菜单的示例：和都是用jquery实现的。如果可能的话，我想要一个角度的实现。我想在不使用jquery的情况下切换我的部分(如您所见)。我尝试了以下方法：--菜单/子菜单指令(柱塞在堆栈溢出处找到) 我都考虑过修改引导3导航条，并希望它与用户界面路由器，但我不相信有任何简单的方式使用ui路由器来实现这种状态切换从相同的菜单选择。

浏览 3提问于2014-01-29得票数 0

回答已采纳

1回答

当在网页上滚动时，jQuery如何改变上下文菜单样式？

、

当我在中向下滚动时，左侧的上下文菜单同时切换其样式。如何使用jQuery实现此效果？

浏览 4提问于2013-06-01得票数 0

回答已采纳

1回答

引导导航栏切换按钮不工作-显示但不打开导航栏(角度)

、、、、

当窗口变小时，切换器确实会出现，但当我单击它时，导航栏不会出现。我想知道是否有人可以快速浏览一下我的代码，并指出可能遗漏的东西。相对较新的bootstrap，所以任何帮助都是非常感谢的！

浏览 24提问于2020-09-25得票数 1

2回答

jQuery切换时隐藏其他下拉列表

我正在使用此jQuery代码片段来切换下拉菜单： jQuery('.ldropdown-toggle').click(function(){ }); 我如何更新它，以便当单击一个.ldropdown切换菜单时，所有其他打开的.ldropdown切换<em

浏览 21提问于2019-10-30得票数 1

回答已采纳

2回答

针对文档的其余部分，停止滚动和toggleClass

、

我正在处理下拉菜单，并使用jQuery操作DOM。到目前为止，我可以切换菜单进入和退出视野。每当菜单出现时，我就将它的CSS位置属性设置为固定，顶部、左和底部属性设置为零，其宽度设置为90%，如下所示 position:fixed; top:0当我在菜单上滚动时(例如，测试时)，文档的其余部分也会滚动。每当看到菜单时，我想将滚动限制在菜单容器上。$(‘.菜单-容器’).hasClass

浏览 3提问于2016-08-16得票数 1

回答已采纳

1回答

切换左侧动画而不添加显示:无

、、

我正在尝试创建一个动画滑动导航菜单，其中的子菜单使用'left‘属性的动画切换滑出。我已经成功地让left属性在初始设置-360px和0属性之间切换，但是当left属性切换为0时，它还会添加display:none。下面是Jquery函数： $("#gallerytoggle").click(f

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

回答已采纳

1回答

关闭带有数据的导航栏--点击切换=“offcanvas”不起作用

、、

我有一个侧边导航，在小型设备上可以很好地从左侧切换。一切都很完美，除了当你点击侧边栏中的一个链接时；我不想用导航栏来隐藏和显示内容div，但是它被卡住了，你必须点击切换按钮来删除侧边栏。<div class="bar1"></div> <div class="bar3"></div>这将<

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

2回答

我已经设置了一个响应菜单，在480 to或更少的菜单上，菜单将崩溃，并显示一个按钮来单击，并导致菜单下拉。我遇到的问题是，菜单会向下切换，然后立即重新切换。它不会一直开着。我向名为..nav的js处理程序类添加了一个css --展开以在切换后运行，以便在将屏幕打开到480 up的较大维度时显示完整的菜单。如果我从样式表中删除css，或者从js中删除代码，当我将页面缩小到480 js或更少时，新菜单将正确显示，我可以<

浏览 3提问于2015-01-06得票数 0

回答已采纳

2回答

HTML切换菜单消失

、、、

我创建了一个简单的HTML菜单，并对其应用了一些媒体查询。我使用的是菜单钩，点击jquery中的slideToggle在小型设备上的菜单。当我们将小屏幕上的菜单切换到可见屏幕并使屏幕最大化时，它会很好地工作，但是如果我们切换以隐藏菜单和最大化隐藏菜单的屏幕，它就会消失。您可以通过调整窗口大小和切换菜单来进行签入。下面是我用来切换菜单的jquery

浏览 1提问于2014-08-06得票数 1

回答已采纳

1回答

如何实现“水平切换响应菜单，其中多余的菜单项目组合成一个下拉菜单”？

、、、、

我试图在一个网站的顶部切换菜单上找到一些引导/信息/实现，有选择地、逐步地将低优先级菜单项移动到子菜单中(例如。“更.”)因为它试图适应更窄的目标屏幕。我看到的唯一的实际示例是Outlook.com menubar (都会样式的)：它使用这种效果；菜单只显示适合窗口宽度的项目，将所有多余的项移动到“.”下的子菜单中。菜单项目。网络将这种UI模式称为“"Priority"/"Priority+”

浏览 3提问于2013-11-21得票数 0

回答已采纳

2回答

如何使用jquery将最后一次单击的项目传递到另一个页面

如何使用jquery将最后单击的项传递到另一个页面？我的web应用程序中有这个切换菜单。我想要发生的是，当我单击切换菜单中的一个链接时，它将转到另一个页面，但它将保持选中的切换菜单打开。下面是我的jquery切换菜单代码 $(document).ready(function(){ $(".product-contents").hide();

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

回答已采纳

1回答

如何重写或停止执行jQuery函数

、、

我有一个jQuery函数，可以将WordPress菜单转换为浮动菜单，然后再转换回来。下面是将菜单设置为浮动的jQuery代码。$logo2_link.fadeOut().remove(); } } 我想要实现的是，如果用户单

浏览 3提问于2013-04-05得票数 0

回答已采纳

2回答

单击并隐藏所有其他下拉菜单。

我有一个菜单栏，其中包含许多父菜单项和子菜单项： <ul> <a href="#">ParentChild item</a></li> <li><a href="#">Child item</a></li&g

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

回答已采纳

1回答

边菜单栏有问题，内容可滚动

、、、、

这是我的JS小提琴链接 MN我如何在CSS中做到这一点。单击该按钮后，JQuery切换应该可以工作。我正试图实现这样的目标：

浏览 3提问于2015-10-16得票数 1

回答已采纳

3回答

创建具有滑动页面效果的单页网站

、、、

我在这个上有一些，它有一个很棒的单页实现，我想要复制它。我希望能够切换内容框(和背景图像)使用菜单链接，如网页。是否有现成的jQuery插件可用？

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

1回答

当单击菜单切换时，菜单在调整大小时消失

、、、

当我单击菜单切换并调整浏览器窗口大小时，菜单将消失。这是菜单的jQuery： $(this).toggleClass("nav-expanded");在移

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

1回答

子菜单wordpress按钮

、、

我想切换只有子菜单的菜单项，但现在发生的事情是，我无法找到切换单个菜单项的方法，每当我切换每个有子菜单或子菜单的父菜单项时，都可以打开打开的子菜单，但不能打开单亲菜单项，以便更清楚地显示我正在实现的链接jQuery(document).ready(function(){ jQuery('.sidebar_menu ul ul&#

浏览 4提问于2014-10-01得票数 0

回答已采纳

1回答