使用JavaSc 和 JQuery给网站添加隐藏侧栏功能

大家可以看到我的博客是用 WordPress 系统搭建的,主题是我自己修改的 WordPress 官方主题,修改后的博客用户默认打开时让侧栏处于隐藏状态也就是单栏显示,当用户点击右侧的显示侧栏后侧栏将会显示,并且用户刷新网页后任然保持上一次的状态,直到用户在此点击隐藏侧栏时才进行隐藏。这个功能用到了 Cookie , Cookie 可以在本地写入数据,用这些本地数据(变量)来保持状态。完整的 Cookie 相关知识网址列表放在本文最下方。

本站修改后用户第一次浏览的状态图(单栏显示)

用户点击显示侧栏后的状态

html 代码

这里只有侧栏按钮的 html 代码,侧栏和主内容的html 代码就没有给出,只要知道 js 获取后的 js 对象即可。

<!--  sidebar Utility -->
<div id="sidebar-tools">
	<button id="sidebar-switch" title="侧栏开关">隐藏侧栏</button>
	<button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
</div>

CSS 样式代码

/* 侧栏 sidebar Utility 样式 */
#sidebar-tools {
    background: #ccc;
    position: fixed;
    right: 0;
    bottom: 50%;
    z-index: 99;
}

/* 返回顶部底部 */
/* return top */
#btnTop {
    display: none;
    border: none;
    outline: none;
    color: white;
    background-color: #2d4a32;
    cursor: pointer;
    padding: 15px;
    border-radius: 2px;
}

#btnTop:hover,
#sidebar-switch:hover {
    background-color: #278837;
}

/* 侧栏状态开关按钮样式 */
#sidebar-switch {
    border-radius: 2px;
    cursor: pointer;
    color: white;
    border: none;
    outline: none;
    padding: 15px;
}

实现 JS 代码

这里要说明的是只有对 Cookie 的读写用到了 JQuery,所以要想使改代码成功运行,网页中就必须要加载 jquery-cookie.js 插件。

JQuery-cookie.js 插件 CDN:

https://www.bootcdn.cn/jquery-cookie/

// 侧栏开关处理

// 这个对象是侧栏显示与隐藏按钮对象,当单击按钮显示状态改变时,这个按钮的文本也进行修改
var sidebar_switch = document.getElementById("sidebar-switch");

// 这是获取的 侧栏元素对象,通过修改这个对象的 display 来显示是否显示侧栏
var sidebar_item = document.getElementById("primary");

// 这是获取的左侧主内容,修改完后需要按需修改这个对象的属性用来自适应宽度,我这里是需要修改 margin
var left_item = document.getElementById("content");

// 这里先用 if 判断本地是否已经存在 sidebar_state 变量
// 如果不存在,则创建 sidebar_state 变量,并且赋值为 hide , expires: 7。是有效期 7 天
// 只有第一次才会运行 if 里边的代码
if ($.cookie("sidebar_state") == null) {
	$.cookie("sidebar_state", "hide", {
		expires: 7
	});
}

// 单击侧栏开关
// 这是侧栏显示按钮的单击事件,刷新页面和打开新页面都不会运行里边的代码
// 只有单击侧栏按钮是才会运行里边的代码
sidebar_switch.onclick = function () {
	// console.log(sidebar_switch.innerHTML);
	// console.log(sidebar_item);
	// console.log($.cookie("sidebar_state"));

	// 判断 Cookie 里边 sidebar_state 的状态,如果是 show ,也就是当前侧栏的状态是显示的
	// 则说明本次单击是为了隐藏侧栏,所以要把侧栏按钮对象的 display = none
	// 这里还修改了侧栏按钮的样式,以便更好的区分显示侧栏和隐藏侧栏两种状态下按钮的样式
	if ($.cookie("sidebar_state") == "show") {
		sidebar_item.style.display = "none"; // 隐藏侧栏
		sidebar_switch.innerHTML = "显示侧栏"; // 修改侧栏按钮的显示文本
		sidebar_switch.style.background = "#17807C"; // 修改侧栏按钮的背景颜色
		// console.log("隐藏");

		left_item.style.margin = "0 20px 0 20px"; // 修改网站左侧对象样式的 margin

		// 既然侧栏的显示状态改变了,那么 Cookie 变量的 sidebar_state 的值也要改变
		// sidebar_state 的状态由 show 改为 hide
		$.cookie("sidebar_state", "hide", {
			expires: 7
		});
	} else {
		// else 里边的代码说明要把侧栏由隐藏状态改为显示状态

		sidebar_item.style.display = "block"; // 显示侧栏
		sidebar_switch.innerHTML = "隐藏侧栏"; // 修改侧栏按钮显示文本
		sidebar_switch.style.background = "#22BFBA"; // 修改侧栏按钮的背景颜色
		// console.log("显示");
		left_item.style.margin = "0 280px 0 20px"; // 修改网站左侧对象样式的 margin

		// 既然侧栏的显示状态改变了,那么 Cookie 变量的 sidebar_state 的值也要改变
		// sidebar_state 的状态由 hide 改为 show
		$.cookie("sidebar_state", "show", {
			expires: 7
		});
	}
}

// 这里是页面刷新或打开新页面时执行的代码
// 这里也就只读取 Cookie 的 sidebar_state 的状态
// 这里的状态由第一次初始化 sidebar_state 的值 show 或者 侧栏按钮单击事件后写入的值两种途径获取
// 需要注意的时这里不需要对 sidebar_state 进行写入,只有侧栏单击事件里才需要对 Cookie 进行写状态
if ($.cookie("sidebar_state") == "hide") {
	sidebar_item.style.display = "none";
	sidebar_switch.innerHTML = "显示侧栏";
	sidebar_switch.style.background = "#17807C";
	// console.log("隐藏");
	left_item.style.margin = "0 20px 0 20px";
} else {
	sidebar_item.style.display = "block";
	sidebar_switch.innerHTML = "隐藏侧栏";
	sidebar_switch.style.background = "#22BFBA";
	// console.log("显示");
	left_item.style.margin = "0 280x 0 20px";
}

相关网址

JavaScript Cookies

https://www.w3school.com.cn/js/js_cookies.asp

JQuery Cookie 官网

https://plugins.jquery.com/cookie/

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注