给网页添加隐藏/显示侧边栏功能

 2019年02月26日  591 次 1 条 8  


请使用手机扫码打开

侧边
   
  本文共1675个字,预计阅读时间需要5分钟。
很多的网站都是默认显示侧边栏,为了提高阅读体验,有的提供了一个"隐藏/显示侧边栏 "功能,通过点击“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,实现了网页的全屏浏览,再次点击则过程相反。为了给读者一个良好的体验折腾,将侧边栏的开关给加上了,代码源自百度,样式基于layui修订。

动图演示:

直接使用本站进行体验更直观

注意:首先分别查看自己主题的主体样式是不是id=“primary”,侧边栏又是不是id=“sidebar”,不是则修改之;另外宽度width值也根据页面宽度相应修改!
CSS样式:
/**隐藏显示侧边栏**/ 
#primary.primary {width: 100%;} 
.sidebar {display: none;}

请将以上代码加入CSS文件中

JS函数:

// 隐藏侧边 
function pr() { 
var R=document.getElementById("sidebar"); 
var L=document.getElementById("primary"); 
if (R.className=="sidebar") 
{ 
R.className="widget-area"; 
L.className="content-area"; 
} 
else 
{ 
R.className="sidebar"; 
L.className="primary"; 
} 
}
请将以上js代码引入主页或复制进已有的js文件中
调用按钮:

根据需要在页面相应位置添加显示和隐藏按钮,代码如下:

<li class="r-hide"> 
<a href="javascript:pr()" onclick="javascript:this.innerHTML=(this.innerHTML=='隐藏边栏'?'显示边栏':'隐藏边栏');">隐藏边栏</a> 
</li>

当然,以上代码或许过于简单,也不美观,可以按以下格式进行美化

<a href="javascript:pr()" title="侧边栏">自定义的元素</a>

本站基于layui的样式代码如下:
<span class="cblshousuo">
<span class="layui-form" action="">
<span class="xiaoshi ">
<span class="cblwenzi">侧边</span>
<a href="javascript:pr()" title="侧边栏开关">
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
</a></span></span></span>
 .layui-form-switch {
   height: 100%;
   margin-top: -2px;
   line-height: 10px;
   border-radius:0px;
   padding: 3.5px 2px;
}
.layui-form-switch i  {
    width: 12px;
    height: 12px;
}
 .cblshousuo {
     float: right;
   	 /*width: 180px;*/
     height: 100%;
}
 .cblwenzi {
    /*color: #fff;*/
	/*border-radius: 2px;
   	background: #5FB878;*/
    font-size: 12px;
   	padding: 2px 5px;
   	border-left: 1px solid #d2d2d2;
    border-top: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
}
本文地址:https://www.funtx.cn/682.html
作者授权:除特别说明外,本文由 Fatansy 原创编译并授权 「饭特喜」 刊载发布。
版权声明:本文使用 「署名-非商业性使用-相同方式共享 4.0 国际」 创作共享协议,转载或使用请遵守署名协议!

发表评论


表情

签到 ← 打字麻烦?那就一键签到好了。

  1. 伊阳
    伊阳 【跟帖局科员】 @回复

    教程很详细,改天也给自己博客折腾下~