JS实现多级菜单中当前菜单不随页面跳转样式而发

一、简介

今天我要向大家介绍一种使用JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化的方法。你是否遇到过这样的问题：在一个项目中，使用公共模板文件，每个子菜单都有链接，但在页面跳转后，菜单的样式并未随之变化，仍然保持默认状态。这就是我们今天要解决的问题。

二、背景与需求

在web开发中，我们经常遇到需要展示多级菜单的场景。当使用公共模板文件时，我们希望在用户点击不同的菜单项进行页面跳转后，对应的菜单项能够显示为激活状态，并且其父级菜单也能相应地展开。这就需要我们实现一种机制，使得菜单的样式能够动态地根据用户的操作进行变化。

三、实现方法

对于这个问题，有几种解决方案。其中一种是通过PHP传递变量来实现，但这种方法需要在每个页面都传递变量，显得非常繁琐。在这里，我们介绍一种更为简洁和高效的方法。

我们可以通过比对当前菜单里的a标签的href值与浏览器的url的值，来判断a标签里的href属性值是否属于浏览器url中的一部分。如果是，那就表示包含该a标签的菜单应该被选中，然后我们可以赋予该菜单及其对应的父级菜单相应的样式。

四、具体操作

我们需要使用JQuery获取当前页面的URL，并与菜单中的每个链接进行比较。可以通过遍历菜单中的所有链接，逐个比较它们的href属性与当前URL。

当找到一个匹配的链接时，我们可以将该链接及其父级菜单设置为激活状态。这可以通过改变它们的CSS类或者添加特定的样式属性来实现。

为了确保菜单的样式能够随着用户的操作动态变化，我们还需要在页面加载完成时执行上述操作，并在用户点击其他菜单项时进行更新。

菜单概览示例

在一个以深蓝色为背景的侧边栏中，清晰列出了几个主要菜单项。这是基于Bootstrap框架精心设计的菜单结构，注重用户体验和视觉美感。下面是菜单的详细介绍：

一、主菜单

醒目的标题“主菜单”引领着整个侧边栏的导航结构。点击展开，你将看到一系列功能丰富的子菜单。

1. 用户管理

代理商：点击这里，你将进入代理商管理界面，轻松管理你的代理商团队。

委托人：这里是管理你的客户的地方，你可以查看、编辑或添加。

客服：这里是你的客服团队的管理中心，你可以分配任务、查看工作进度等。

管理员：作为管理员，你可以进行全局设置、管理用户权限等。

2. 车辆管理

单车：在这里，你可以查看、编辑或添加单车信息，进行单车调度等。

3. 统计报表

单车收益：通过这个功能，你可以查看单车的收益情况，包括每日、每周、每月等收益报表，帮助你更好地了解业务状况。

当你在某一菜单页面进行操作时，相应的菜单项会自动添加“active”属性，使其突出显示当前活动的菜单项。其父级菜单也会进行相应的显示调整，为用户提供清晰的导航指引。这种设计不仅美观，而且用户体验极佳。

以下是一段精心编写的JavaScript代码，将其放置在公共的JS文件中即可轻松使用。

让我们获取当前页面的URL，并对其进行处理，以获取我们需要的部分。使用`window.location.href`获取当前URL，然后通过`split('?')[0]`去除URL中的参数部分。

`CURRENT_URL = window.location.href.split('?')[0];`

接下来，我们将URL按照“/”进行分割，并保留到特定的部分（这里的“6”代表保留的分割部分数量，可以根据实际需求进行调整）。

`CURRENT_URL_ARR = CURRENT_URL.split("/", 6);`

现在，我们开始一个循环，用于匹配和处理URL。在每次循环中，我们都会将当前URL数组转化为一个字符串（以逗号分隔），然后再将其中的逗号替换为斜杠，以形成标准的URL形式。

然后，我们遍历页面中的菜单栏（带有`.sidebar-menu`类），并找到所有的``标签。我们过滤出那些其`href`属性与我们构建的URL相匹配的标签。对于这些匹配的标签，我们为其父`