尚筹网：菜单维护之增加/更新

最新推荐文章于 2022-12-29 17:00:23 发布
最新推荐文章于 2022-12-29 17:00:23 发布
阅读量213 收藏
点赞数
原文链接：https://www.bilibili.com/video/av69857918?p=81
版权

生成按钮组

/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-menu.js


// 专门生成按钮组的函数
function generateBtnGrp(treeNode) {
	
	// 获取当前节点的id（HTML中li标签的id）
	var treeNodeId = treeNode.tId;
	
	// 获取当前节点在数据库中的id值
	// Menu实体类中的属性，都可以通过treeNode以“.属性名”的方式直接访问
	var menuId = treeNode.id;
	
	// 组装按钮组所在的span的id
	var btnGrpSpanId = treeNodeId + "_btnGrp";
	
	// 生成span标签对应的jQuery对象
	var $span = $("<span id='"+btnGrpSpanId+"'></span>");
	
	// 获取当前节点的level值
	var level = treeNode.level;
	
	// 声明三种按钮
	var addBtn = "<a οnclick='showAddModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg'></i></a>";
	var editBtn = "<a οnclick='showEditModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='编辑节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg'></i></a>";
	var removeBtn = "<a οnclick='showConfirmModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='删除节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg'></i></a>";
	
	// 根据level进行判断
	if(level == 0) {
		$span.append(addBtn);
	}
	
	if(level == 1) {
		
		if(treeNode.children.length > 0) {
			
			$span.append(addBtn+" "+editBtn);
			
		} else {
			
			$span.append(addBtn+" "+editBtn+" "+removeBtn);
			
		}
		
	}
	
	if(level == 2) {
		
		$span.append(editBtn+" "+removeBtn);
		
	}
	
	return $span;
}

增加

前端部分

1、准备模态框：include-modal-menu-add.jsp：/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-menu-add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div id="menuAddModal" class="modal fade in" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">尚筹网系统弹窗</h4>
			</div>
			<form>
				<div class="modal-body">
						请输入节点名称：<input type="text" name="name"><br>
						请输入URL地址：<input type="text" name="url"><br>
						<input type="radio" name="icon" value="glyphicon glyphicon-th-list">           <i class="glyphicon glyphicon-th-list"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-dashboard">         <i class="glyphicon glyphicon-dashboard"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon glyphicon-tasks">   <i class="glyphicon glyphicon glyphicon-tasks"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-user">              <i class="glyphicon glyphicon-user"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-king">              <i class="glyphicon glyphicon-king"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-lock">              <i class="glyphicon glyphicon-lock"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-ok">                <i class="glyphicon glyphicon-ok"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-check">             <i class="glyphicon glyphicon-check"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-th-large">          <i class="glyphicon glyphicon-th-large"></i><br>
						<input type="radio" name="icon" value="glyphicon glyphicon-picture">           <i class="glyphicon glyphicon-picture"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-equalizer">         <i class="glyphicon glyphicon-equalizer"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-random">            <i class="glyphicon glyphicon-random"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-hdd">               <i class="glyphicon glyphicon-hdd"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-comment">           <i class="glyphicon glyphicon-comment"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-list">              <i class="glyphicon glyphicon-list"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-tags">              <i class="glyphicon glyphicon-tags"></i>
						<input type="radio" name="icon" value="glyphicon glyphicon-list-alt">          <i class="glyphicon glyphicon-list-alt"></i> 
						<br/>
				</div>
				<div class="modal-footer">
					<button id="menuAddBtn" type="button" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> 保存</button>
					<button id="menuAddResetBtn" type="reset" class="btn btn-primary"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
				</div>
			</form>
		</div>
	</div>
</div>

2、/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp的最下面的body标签的上面引用：

	<%@ include file="/WEB-INF/include-modal-menu-add.jsp" %>
</body>

3、在点击+按钮之后打开模态框：/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-menu.js
在这里插入图片描述

//在点击添加按钮时执行这个函数，打开模态框
function showAddModal(currentBtn) {
	
	// 打开模态框
	$("#menuAddModal").modal("show");
	
	// 将当前节点的id存入全局变量
	window.menuId = currentBtn.id;
}

4、给保存按钮绑定单击函数
在这里插入图片描述
/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp

$("#menuAddBtn").click(function(){
			
			// 收集表单填写的数据
			var name = $.trim($("#menuAddModal [name='name']").val());
			var url = $.trim($("#menuAddModal [name='url']").val());
			var icon = $("#menuAddModal [name='icon']:checked").val();
			
			if(name == null || name == "") {
				layer.msg("请填写菜单项名称！");
				return ;
			}
			
			if(url == null || url == "") {
				layer.msg("请填写菜单项对应的访问地址！");
				return ;
			}
			
			// 发送Ajax请求
			$.ajax({
				"url":"menu/save.json",
				"type":"post",
				"dataType":"json",
				"data":{
					"name":name,
					"url":url,
					"pid":window.menuId,	// 当前操作的节点是新节点的父节点
					"icon":icon
				},
				"success":function(response){
					
					var result = response.result;
					
					if(result == "SUCCESS") {
						layer.msg("操作成功！");
						
						initWholeTree();
					}
					
					if(result == "FAILED") {
						layer.msg(response.message);
					}
					
				},
				"error":function(response){
					layer.msg(response.message);
				}
			});
			
			$("#menuAddModal").modal("hide");
		});

后端部分

1、handler部分

@RequestMapping("/menu/save")
public ResultEntity<String> saveMenu(Menu menu) {
	
	menuService.saveMenu(menu);
	
	return ResultEntity.successWithoutData();
}

2、dao

	@Override
	public void saveMenu(Menu menu) {
		// TODO Auto-generated method stub
		menuMapper.insert(menu);
	}

更新

前端

1、 准备模态框：include-modal-menu-edit.jsp：\atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-menu-edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div id="menuEditModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">尚筹网系统弹窗</h4>
			</div>
			<form>
				<div class="modal-body">
					请输入节点名称：<input type="text" name="name" /><br /> 请输入URL地址：<input
						type="text" name="url" /><br /> <input type="radio" name="icon"
						value="glyphicon glyphicon-th-list" /> <i
						class="glyphicon glyphicon-th-list"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-dashboard" /> <i
						class="glyphicon glyphicon-dashboard"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon glyphicon-tasks" /> <i
						class="glyphicon glyphicon glyphicon-tasks"></i> <input
						type="radio" name="icon" value="glyphicon glyphicon-user" /> <i
						class="glyphicon glyphicon-user"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-king" /> <i
						class="glyphicon glyphicon-king"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-lock" /> <i
						class="glyphicon glyphicon-lock"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-ok" /> <i
						class="glyphicon glyphicon-ok"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-check" /> <i
						class="glyphicon glyphicon-check"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-th-large" /> <i
						class="glyphicon glyphicon-th-large"></i><br /> <input
						type="radio" name="icon" value="glyphicon glyphicon-picture" /> <i
						class="glyphicon glyphicon-picture"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-equalizer" /> <i
						class="glyphicon glyphicon-equalizer"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-random" /> <i
						class="glyphicon glyphicon-random"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-hdd" /> <i
						class="glyphicon glyphicon-hdd"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-comment" /> <i
						class="glyphicon glyphicon-comment"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-list" /> <i
						class="glyphicon glyphicon-list"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-tags" /> <i
						class="glyphicon glyphicon-tags"></i> <input type="radio"
						name="icon" value="glyphicon glyphicon-list-alt" /> <i
						class="glyphicon glyphicon-list-alt"></i> <br />
				</div>
				<div class="modal-footer">
					<button id="menuEditBtn" type="button" class="btn btn-success">
						<i class="glyphicon glyphicon-refresh"></i> 更新
					</button>
				</div>
			</form>
		</div>
	</div>
</div>

2、/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp的最下面的body标签的上面引用：

	<%@ include file="/WEB-INF/include-modal-menu-edit.jsp" %>
</body>

3、在点击修改按钮之后打开模态框：/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-menu.js


//在点击编辑按钮时执行这个函数，打开模态框
function showEditModal(currentBtn) {
	
	// 打开模态框
	$("#menuEditModal").modal("show");
	
	// 获取当前节点的id存入全局变量
	window.menuId = currentBtn.id;
	
	// 发送请求查询Menu对象
	$.ajax({
		"url":"menu/get/"+window.menuId+".json",
		"type":"get",
		"dataType":"json",
		"success":function(response) {
			
			var result = response.result;
			
			if(result == "SUCCESS") {
				
				// 从响应数据中获取Menu对象
				var menu = response.data;
				
				// 获取各个属性值
				var name = menu.name;
				
				var url = menu.url;
				
				var icon = menu.icon;
				
				// 设置各个对应的表单项
				$("#menuEditModal [name='name']").val(name);
				
				$("#menuEditModal [name='url']").val(url);
				
				// radio需要让value值和后端查询到的icon一致的设置为被选中
				$("#menuEditModal [name='icon'][value='"+icon+"']").attr("checked",true);
			}
			
			if(result == "FAILED") {
				layer.msg(response.message);
			}
		},
		"error":function(response) {
			layer.msg(response.message);
		}
	});
	
}

3、给更新按钮绑定单击函数

在这里插入图片描述
/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp

$("#menuEditBtn").click(function(){
			
			// 收集表单填写的数据
			var name = $.trim($("#menuEditModal [name='name']").val());
			var url = $.trim($("#menuEditModal [name='url']").val());
			var icon = $("#menuEditModal [name='icon']:checked").val();
			
			if(name == null || name == "") {
				layer.msg("请填写菜单项名称！");
				return ;
			}
			
			if(url == null || url == "") {
				layer.msg("请填写菜单项对应的访问地址！");
				return ;
			}
			
			// 发送Ajax请求
			$.ajax({
				"url":"menu/update.json",
				"type":"post",
				"dataType":"json",
				"data":{
					"id":window.menuId,
					"name":name,
					"url":url,
					"icon":icon
				},
				"success":function(response){
					
					var result = response.result;
					
					if(result == "SUCCESS") {
						layer.msg("操作成功！");
						
						initWholeTree();
					}
					
					if(result == "FAILED") {
						layer.msg(response.message);
					}
					
				},
				"error":function(response){
					layer.msg(response.message);
				}
			});
			
			$("#menuEditModal").modal("hide");
		});

后端

1、根据id查询menu

// handler
	@RequestMapping("/menu/get/{menuId}")
	public ResultEntity<Menu> getMenuById(@PathVariable("menuId")Integer menuId) {
		Menu menu = menuService.getMenuById(menuId);
		return ResultEntity.successWithData(menu);
	}

//dao
	@Override
	public Menu getMenuById(Integer menuId) {
		// TODO Auto-generated method stub
		return menuMapper.selectByPrimaryKey(menuId);
	}

2、更新菜单

	@RequestMapping("/menu/update")
	public ResultEntity<String> updateMenu(Menu menu){
		menuService.updateMenu(menu);
		return ResultEntity.successWithoutData();
	}

	@Override
	public void updateMenu(Menu menu) {
		// TODO Auto-generated method stub
		menuMapper.updateByPrimaryKey(menu);
	}

/atcrowdfunding-admin-1-webui/src/main/resources/mybatis/mapper/MenuMapper.xml：注意：把SQL中的pid修改去掉，不改变节点的父节点。

<update id="updateByPrimaryKey"
	parameterType="com.atguigu.crowd.funding.entity.Menu">
	update t_menu
	set pid = #{pid,jdbcType=INTEGER},
	name = #{name,jdbcType=VARCHAR},
	url = #{url,jdbcType=VARCHAR},
	icon = #{icon,jdbcType=VARCHAR}
	where id = #{id,jdbcType=INTEGER}
</update>
OceanStar的学习笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
菜单维护模块
10-27
菜单
尚筹网 —— 6、菜单维护
Mr_zhangyj的博客
05-11 411
1、树形结构基础知识 1.1、节点类型 约定：整个树形结构节点的层次最多只能有 3 级。 1.2、在数据库表中表示属性结构 1.2.1、创建菜单的数据库表 create table t_menu ( id int(11) not null auto_increment, pid int(11), name varchar(200), url varchar(200), icon varchar(200), primary key (id) );
尚筹网-菜单维护模块
weixin_51625266的博客
08-15 207
树形结构基础知识 1.节点类型 在数据库中表示树形结构 在java类中表示树形结构 1.基本方式 在 Menu 类中使用 List children 属性存储当前节点的子节点。 2.为配合zTree所需要添加的属性 pid 属性：找到父节点 name 属性：作为节点名称 icon 属性：当前节点使用的图标 open 属性：控制节点是否默认打开 url 属性：点击节点时跳转的位置 2 菜单维护：页面显示树形结构 1 目标 将数据库中查询得到的数据到页面上显示出来。 2.逆向工程 generatorConf
尚筹网：菜单维护之在页面显示树形结构的后端部分
OceanStar的博客
01-07 315
把树形结构组装好，具体来说是：给前端返回根节点对象。在根节点中包含子节点，子节点中再包含下一级的子节点。 代码 handler方法中的具体操作 /atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/handler/MenuHandler.java @RequestMapping("/menu/get...
自定义表单-系统菜单维护
weixin_34370347的博客
06-10 145
　　这个标题有点俗！每个系统的这个功能都有相似之处，简单，却不能缺少，把菜单管理做的方便、简洁、易用还是很不错的。 　　根据不同的系统，菜单的数据结构也大有不同，在此我是将它分为了三级：模块、栏目、菜单。它并不是万能的，但能够做到一般性的使用足矣。 　　想到菜单，就会想到授权，但今天咱暂且不谈这，就专心的看下我眼下的菜单管理，直接贴图： 确实，菜单的管理我是通过树结构来弄的，这可能也是大...
KISSmenu:KeepItSimple：在非/交互式菜单中组织和集成您的工具-开源
04-26
您是否具有带有多个参数的数十种工具？ KISSmenu可帮助您组织它们，集成它们并在基于终端的菜单中交互式地运行它们或自动运行它们，例如，将其作为cron作业启动。... 一个500行长的bash脚本，易于维护，分叉或扩展。
destoon实现商铺管理主页设置增加新菜单的方法
10-25
在这里，你需要将这两个数组的元素进行更新，增加你的新菜单项。例如，如果想添加“客户案例”菜单，可以将 `array()` 中的元素按照顺序添加，同时保持键值对齐。 2. **修改会员模块文件**： 接下来，打开 `/...
Shell实现多级菜单系统安装维护脚本实例分享
01-10
1、一级菜单 2、二级菜单 3、执行操作 脚本参考： 代码如下: #!/bin/bash #author lic(oldboy linux student) #date 1304 DISK_NO=”/dev/sda1″ NGINX_DIR=”/usr/local/tdoa/nginx/sbin/nginx” MYSQL_DIR=”/...
Android 动态更新Menu菜单
09-02
动态更新Menu菜单是一项重要的功能，它允许我们在运行时根据应用的状态或用户行为来改变菜单项，提供更加灵活的用户体验。下面我们将深入探讨如何在Android中实现动态更新Menu菜单。 1. **创建Menu资源** 首先，...
html实现好看的多种风格导航菜单(源码)
最新发布
06-29
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，...
微信公众号菜单代码维护
04-26
微信公众号菜单创建 1.修改WechatUtil中AppID和AppSecret 2.修改Data文件下的Menu.txt中的菜单内容。
glyphicon 图标大全新增62个
06-12
我们http://w3c.3306.biz/bootstrap/eg/bootstrap--glyphicons-list.html 网站找到bootstrap 图标，但是上面的是不完整的 复制粘贴图标都没有，如果再到其它网站去抠取，感觉不匹配，骰子还是原配的好，我引入了bootstrap-cerulean.min.css ，又新增了62个
基础模块-sys-系统菜单维护
wangrq_cn的博客
12-29 154
系统菜单在整个系统中通常都是树型结构展示的，每一个系统菜单都必须对应一个系统对象，也就是说，菜单必须与系统对象绑定才能使用程序。
day05【后台】菜单维护
Oneby的博客
09-20 541
day05【后台】菜单维护 1、数据库中存储树形结构 1.1、节点类型 1.2、创建菜单表 执行SQL语句创建数据库表 USE project_crowd CREATE TABLE t_menu ( id INT(11) NOT NULL AUTO_INCREMENT, pid INT(11), NAME VARCHAR(200), url VARCHAR(200), icon VARCHAR(200), PRIMARY KEY (id) ); 1.3
【尚筹网】IDEA版实现（五）菜单维护
m0_56018220的博客
03-06 628
由于尚硅谷的视频是通过Eclipse软件来做的，其中有些操作与IDEA上有所区别，所以我在这里将IDEA区别于Eclipse的操作、操作过程中涉及的源码（与视频的源码略有出入）以及大家可能遇到的种种问题分享给大家，这些源码在我这里均是通过测试的，仅供参考！ 1 创建数据库表 在SQLyog中配置t_menu数据库表： create table t_menu ( id int(11) not null auto_increment, pid int(11), name varch
尚筹网：更新用户
OceanStar的博客
12-30 181
操作流程 跳转到更新页面 修改前 <button type="button" class="btn btn-primary btn-xs"> <i class=" glyphicon glyphicon-pencil"></i> </button> 修改后 <a href="admin/to/edit/page.html?adminId=...
尚硅谷-尚筹网-后台-菜单维护
金州拉文
05-25 318
订单
Bootstrap FileInput中文API整理
热门推荐
过去_现在_未来
04-09 15万+
Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件，在用的过程中，网上能查到的api都不是很全，所以想着整理一份比较详细的文档，方便自己今后使用，也希望能给大家带来帮助，如有错误，希望大家积极指正。 一、    引入文件 &lt;link href="../css/bootstrap.min.css"rel="style...
众筹项目之后台管理系统-菜单维护(七)
Criven的博客
06-04 385
目录
jQuery.dropotron = function(options) { // Settings var settings = jQuery.extend({ selectorParent: null, // The parent jQuery object baseZIndex: 1000, // Base Z-Index menuClass: 'dropotron', // Menu class (assigned to every UL) expandMode: 'hover', // Expansion mode ("hover" or "click") hoverDelay: 150, // Hover delay (in ms) hideDelay: 250, // Hide delay (in ms; 0 disables) openerClass: 'opener', // Opener class openerActiveClass: 'active', // Active opener class submenuClassPrefix: 'dropotron-level-', // Submenu class prefix mode: 'slide', // Menu mode ("instant", "fade", "slide", "zoom") speed: 'fast', // Menu speed ("fast", "slow", or ms) easing: 'swing', // Easing mode ("swing", ???) alignment: 'left', // Alignment ("left", "center", "right") offsetX: 0, // Submenu offset X offsetY: 0, // Submenu offset Y globalOffsetY: 0, // Global offset Y IEOffsetX: 0, // IE Offset X IEOffsetY: 0, // IE Offset Y noOpenerFade: false, // If true, when in "fade" mode the top-level opener will not fade with the menu detach: true // Detach second level menus (to prevent parent styling from bleeding through) }, options);
06-11
这段代码是 `jQuery.dropotron` 函数的主体部分，用于生成下拉菜单。 首先，通过 `jQuery.extend()` 方法将传入的 `options` 对象与默认设置进行合并，得到最终的 `settings` 对象，其中包含了菜单的各种设置，例如： - `selectorParent`：菜单的父级元素； - `baseZIndex`：菜单的基础 Z-Index 值； - `menuClass`：菜单的样式类； - `expandMode`：菜单的展开模式（鼠标悬停或点击）； - `hoverDelay`：鼠标悬停延迟时间； - `hideDelay`：鼠标移开后菜单的隐藏时间； - `openerClass`：触发菜单展开的元素的样式类； - `openerActiveClass`：触发菜单展开的元素的激活状态样式类； - `submenuClassPrefix`：子菜单的样式类前缀； - `mode`：菜单展开的动画效果（即菜单的模式：直接显示、渐变、滑动或缩放）； - `speed`：菜单展开的速度； - `easing`：菜单展开的缓动函数； - `alignment`：菜单的对齐方式； - `offsetX` 和 `offsetY`：子菜单的偏移量； - `globalOffsetY`：整个菜单的全局偏移量； - `IEOffsetX` 和 `IEOffsetY`：针对 IE 浏览器的偏移量； - `noOpenerFade`：如果为 true，当菜单展开时，顶级触发元素不会渐变； - `detach`：是否将二级菜单从父级菜单中分离（以防父级菜单的样式影响子菜单）。 然后，该函数会对菜单的每个子菜单进行遍历，设置其初始状态和绑定事件。具体实现过程较为复杂，包括以下几个主要步骤： - 为子菜单添加样式类； - 设置子菜单的位置； - 绑定鼠标悬停或点击事件，根据 `expandMode` 展开菜单； - 绑定菜单的隐藏事件。 最后，该函数返回菜单的 jQuery 对象，供调用者使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值