知更鸟主题文章右侧隐藏功能的实现

Home / Article MrLee 2016-3-24 2918

这里不得不说,鸟哥的wordpress主题begin做的是相当不错,而且功能还挺多。自带商品、下载、图片……其文章页还有一个按钮,点击就能自动隐藏右边小工具栏,那么这个是怎么实现的呢?容我慢慢道来吧!
我先来说下这个原理,首先,默认左边显示70.4%,右边28.6%。然后用ID来做样式,注意,是ID,因为后面用JS动态控制class的值,来看代码,先是左边的样式,有个0.5秒的过渡时间
[css]#primary{float: left;width: 70.4%;transition-duration: .5s; }[/css]
再来看右边的id样式代码
[css]#sidebar {float: right;width: 28.6%; }[/css]
右边的class代码
[css].sidebar-hide {animation: fade-in;animation-duration: 1s;-webkit-animation: fade-in 1s; }[/css]
就是正常的显示,还未点击隐藏按钮之前!那继续看,我们点下按钮,看看按钮的JS代码是啥
function pr() {
var R=document.getElementById("sidebar");
var L=document.getElementById("primary");
if (R.className=="sidebar")
	{
		R.className="sidebar-hide";
		L.className="";
	}
else
	{
		R.className="sidebar";
		L.className="primary";
	}
}

这代码就是获取正常的id的class样式,然后把右边的变成隐藏样式,隐藏样子实现就是把宽度变成0(事实上这个值是多余的),display为none(不显示),代码如下:
[css].sidebar {width: 0;display: none; }[/css]
右边不显示,我们左边当然要占用它原来的宽度了,所以左边宽度当然是100了,样式代码:
[css]#primary.primary {width: 100%; }[/css]
这里要注意的是,这是class样式,不是id,后面的JS代码就不解释了,把隐藏的样式替换成正常的。
总结:核心思想就是利用JS动态替换样式来实现隐藏div!

本文链接:https://www.it72.com/8413.htm

推荐阅读
最新回复 (0)
返回