锁定菜单

锁定菜单

开发工具及关键技术：Visual Studio 2017 Html JQuery
撰写时间：2019-01-28

在这里我给大家分享的功能是锁定菜单，这个功能是由鼠标移入显示移出隐藏事件、锁定后的事件和解锁后的事件
今天我为什么要给大家讲解这个功能呢
因为跟据我浏览的一些服务或者后台网页发现有大多数都有锁定菜单这个功能，
这个功能也是挺实用的
然后这个功能的优点是可以让菜单浮动显示、固定显示、隐藏，
缺点可能就是部分人会觉得麻烦

（图1）
如（图1）所示，鼠标移入后菜单会显示
（页面打开时，菜单不会自动隐藏，需要鼠标移入再鼠标移出才会隐藏）

（图2）
如（图2）所示，鼠标移出后菜单会自动隐藏

（图3）
如（图3）所示，点击锁定菜单按钮后菜单会固定在左侧

（图4）
如（图4）所示，点击解锁菜单按钮后菜单会自动隐藏

Html代码部分：

Css代码部分：

JQuery代码部分：

OverOut() ;//调用封装好的鼠标移入移出事件
var Lock = true; //声明一个变量lock=true（锁定菜单为true，解锁菜单为false）
$("#Lock").click(function() { //给#Lock添加一个点击事件
	if (Lock == false) { //判断Lock等于false
		Lock = true; //变量Lock等于true
		$(".lock-circle").css("float", "left"); //更改div为左浮动
		$(".lock-circle").css("background", "#585858"); //更改div的背景颜色
		$(this).css("border-color", "#585858"); //更改div的边框颜色
		$(this).css("background", ""); //设置div的背景为空
		$(".lock-text").text("锁定菜单"); //更改div的text值为锁定菜单
		OverOut(); //调用封装好的鼠标移入移出事件
	} else { //Lock不等于false时
		Lock = false; //变量Lock等于false
		$(".lock-circle").css("float", "right"); //更改div为左浮动
		$(".lock-circle").css("background", "#fff"); //更改div的背景颜色
		$(this).css("border-color", "#058de7"); //更改div的边框颜色
		$(this).css("background", "#058de7"); //设置div的背景颜色
		$(".lock-text").text("解锁菜单"); //更改div的text值为锁定菜单
		$("#LeftMenu").off(); //off()函数将会移除#LeftMenu的事件
	}
});

function OverOut() { //封装鼠标移入移出事件
	$("#LeftMenu").mouseover(function() { //鼠标移入事件
		$("#LeftMenu").css("margin-left", "0px"); //更改#LeftMenu的外边距为0
		$("#main-content").css("width", "calc(100% - 220px)"); //更改#main-content的宽度为100% - 220px 220px是#LeftMenu的宽度
		clearTimeout(mouseOver); //重置间隔函数mouseOver
	});
	$("#LeftMenu").mouseout(function() { //鼠标移出事件
		mouseOver = setTimeout(function() { //设置间隔函数mouseOver，1.5秒后执行
			$("#LeftMenu").css("margin-left", "-217px"); //更改#LeftMenu的外边距为-217px
			$("#main-content").css("width", "calc(100% - 3px)"); //更改#main-content的宽度为100% - 3px 3px是#LeftMenu剩余的宽度可以让鼠标移入显示
		}, 1500);
	});
}