没错,我又折腾广告位了,距离上一篇文章:如何给我们的站点广告添加一个关闭按钮才不过4个多小时,原因是,我发现比关闭广告位效果还要好的做法是折叠广告位,读者们不想看时,点击可以折叠,读者们想看时,点击又可以展现,比单纯的关闭用户体验要好得多。不过等我折腾出来的时候,已经有人实现了这一功能,并且在我文章下留言了,晕倒,就是这篇文章:简单的JS实现点击一次关闭和点击一次展开。不过好歹折腾了这么久,我还是决定写出来纪念一下吧。折叠效果如下:
1、在我们所使用的WordPress主题的style.css文件最后面添加以下代码:
- /* 站点动态广告位 */
- #teamnewslist ol{list-style:none;padding-left: 14px;border-left: 2px solid #eee;font-size: 15px;color: #666;}
- #teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
- #teamnewslist b::after{position: absolute;top: 6px;left: –22px;content: ”;width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), –2px –2px 0 rgba(255,255,255,1)}
- #teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
- #teamnewslist li:hover{color: #555;}
- #teamnewslist li:hover b::after{border-color: #C01E22;}
- #teamnewslist li:hover b{color: #C01E22;}
- #teamnewslist{padding-left:33px;}
- #timedd dd{margin:0;padding:0;}
- #timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
- #timedd dt,dt a{width:100%;height:auto;display:block;font-weight: bold;color:#333;font-size:18px;cursor:pointer;padding: 1px 0 0 14px;}
- #timedd dt a:hover{color: #FF0000;}
2、然后我们来创建个写折叠的js.代码如下:
- var number=2; //
- function LMYC() {
- var lbmc;
- for (i=1;i<=number;i++) {
- lbmc = eval(‘LM’ + i);
- lbmc.style.display = ‘none’;
- }
- }
- function ShowFLT(i) {
- lbmc = eval(‘LM’ + i);
- if (lbmc.style.display == ‘none’) {
- LMYC();
- lbmc.style.display = ”;
- }
- else {
- lbmc.style.display = ‘none’;
- }
- }
3、把这个JS文件放在主题目录的JS文件夹里面,不会写JS文件的,直接在JS文件夹随便下载一个,里面的内容换成以上代码。
4、在广告位时,请切换到文本模式, 然后按以下格式编辑内容:
- <div id=“timedd”>
- <dt onClick=javascript:ShowFLT(1) href=“javascript:void(null)”><a href=“javascript:;”><i class=“fa fa-clock-o” aria-hidden=“true”></i> 广告位1</a></dt>
- <dd id=LM1>
- <div id=“teamnewslist”>
- <ol>
- —————你的广告1,我的广告列表你用不了,要用到CSS———————-
- </ol>
- </div>
- </dd>
- <dt onClick=javascript:ShowFLT(2) href=“javascript:void(null)”><a href=“javascript:;”><i class=“fa fa-clock-o” aria-hidden=“true”></i> 你的广告2</a></dt>
- <dd id=LM2 style=“DISPLAY: none”>
- <div id=“teamnewslist”>
- <ol>
- —————你的广告2,我的广告列表你用不了,要用到CSS———————-
- </ol>
- </div>
- </dd>
- </div>
略显复杂,是根据懿古今时光轴记录修改版,增加折叠功能!这篇文章引申的,分钱榜底部的关于站长就添加了这个时光轴,所以以上步骤都省略了,只是顺便根据这个思路改了一个广告位代码而已。