WordPress边栏增加可展开收缩FAQ问答列表样式,html页面+Css样式+jQuery代码全面分享

我们是云服务器代金券、折扣码及优惠链接的分享者,一直想给自己自己的WordPress边栏增加可展开收缩FAQ问答列表,苦于写不出漂亮的CSS样式而搁置,前几天求助于“百度”找到了一款不错的样式,稍作调整改为不受主题限制的边栏问答列表,经过测试效果十分不错,下面分享教程,供大家参考学习。为了方便大家在其他网站也能使用这个样式,文末会把适合其他网站使用的html页面+Css样式+jQuery代码全部分享出来。

FAQ问答列表样式展示页面:https://www.juyun.top/goumai

WordPress边栏增加可展开收缩FAQ问答列表样式,html页面+Css样式+jQuery代码全面分享

第一步:给WordPress添加CSS样式

登录WordPress后台,点击左侧导航【外观】,再点击【自定义】,然后在【额外CSS】一栏添加下面的代码:

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
.clearfix{height:1%}
.clearfix{display:block}
.clearfix{min-height:1%}

.UI-bubble{display:inline-block;width:23px;height:23px;overflow:hidden;background:url(../images/sicons.png) 0px 0px no-repeat;}
.UI-ask{display:inline-block;width:23px;height:23px;overflow:hidden;background:url(../images/sicons.png) -25px 0px no-repeat;}

/* questions */
#questions{width:100%;margin:5px auto;border-top:1px solid #e7e7e7;}
#questions p{margin:0;font-size:14px;color:#666;}
#questions li h5 .UI-ask,#questions li h5 .UI-bubble{position:absolute;left:0px;top:9px;}
#questions li{padding:0 0 5px 0;vertical-align:bottom;}
#questions li h5{height:40px;position:relative;color:#666;font-size:15px;cursor:pointer;line-height:40px;height:40px;overflow:hidden;padding:0 0 0 26px;}
#questions li .foldContent{border-left:3px solid #018ccb;padding:10px 10px 10px 15px;border-top:1px dashed #e2e2e2;line-height:24px;background:#f3f3f3;color:#888;}

第二步:给WordPress边栏添加html代码

登录WordPress后台,点击左侧导航【外观】,再点击【小工具】,然后找到【自定义HTML】小工具添加到目标边栏。然后在【自定义HTML】小工具内添加下面的代码:

<div id="questions">
<ul>
<li class="clearfix">
<h5><b class="UI-ask"></b>是在云服务器官方购买吗?</h5>
<div class="foldContent">
<p>是的,我们只提供优惠链接,代金券,折扣码,所有产品均在云服务器官网购买。</p>
</div>
</li>
<li class="clearfix">
<h5><b class="UI-ask"></b>云服务器是在自己账号里面吗?</h5>
<div class="foldContent">
<p>是的,云服务器在您注册的云服务器账号里面。</p>
</div>
</li>
<li class="clearfix">
<h5><b class="UI-ask"></b>购买云服务器怎么付款?</h5>
<div class="foldContent">
<p>直接在阿里云、腾讯云等云服务器官方付款购买云产品,我们在原则上不收取客户的任何产品购买费用。</p>
</div>
</li>
<li class="clearfix">
<h5><b class="UI-ask"></b>"优惠链接"和"官网购买"有区别吗?</h5>
<div class="foldContent">
<p>当然有。除了享受折扣价购买云服务器外,您可以和本站客服取得联系,享受云服务器购买咨询及技术支持。</p>
</div>
</li>
<li class="clearfix">
<h5><b class="UI-ask"></b>"聚云网"提供哪些技术服务呢?</h5>
<div class="foldContent">
<p>我们为您提供云服务器基本维护、性能优化、网站数据备份等多种技术支持,详情请点 <a href="https://www.juyun.top/5178.html" style="font-weight:500;font-style:italic;color:#fe791a;">更多服务</a></p>
</div>
</li>
</ul>
</div>

第三步:给WordPress添加jQuery代码

这里需要说明一下,不同的主题添加jQuery代码的位置不同,通常有三种方法:

1、把下面的代码也复制粘贴到【自定义HTML】小工具内,放在HTML代码的下面即可。

2、把下面的代码输入到【统计代码】位置,因为每个主题都有粘贴统计代码的位置。

3、如果您的主题恰巧么有,那就把下面的代码复制粘贴到主题的js文件中即可,这种方法得熟悉WordPress才能操作。

<script>
$(function(){
$("li>h5","#questions").bind("click",function(){
var li=$(this).parent();
if(li.hasClass("fold")){
li.removeClass("fold");
$(this).find("b").removeClass("UI-bubble").addClass("UI-ask");
li.find(".foldContent").slideDown();
}else{
li.addClass("fold");
$(this).find("b").removeClass("UI-ask").addClass("UI-bubble");
li.find(".foldContent").slideUp();
}
});
})
</script>

第四步:上传FAQ图片

通过上面三步,基本已经成功了,但是您会发现没有演示中的图片,在您的WordPress主题根目录新建一个images文件夹,把下面的图片保存并且上传到images文件夹即可。注意:图片的名称不能更改,改变后会不能显示。

链接:https://pan.baidu.com/s/1aeOKU_GCDIEjOlvFEGDUVQ
提取码:tiug

可展开收缩问答样式代码下载

文件中包括:html页面代码、Css样式代码、jQuery展开收缩代码,大家可以下载使用。在这里感谢代码库的分享,祝代码库越来越好!

链接:https://pan.baidu.com/s/1WddjwKZGDmkMhbak-iY4vg
提取码:bu3z

本站所有内容,如有版权、侵权等问题,请及时联系本站做删除。发布者:聚云网,转载请注明出处:https://www.juyun.top/5199.html

(2)
打赏 微信扫一扫 微信扫一扫
云大君云大君
上一篇 2020年4月27日 下午11:37
下一篇 2020年5月4日 上午10:31

相关推荐

发表回复

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

问答社区 在线客服
咨询电话

iphone 咨询热线:13001069197

服务时间:上午 9:00 至晚上 21:00

联系我们

qq 技术:109033286

qq 运维:3423710838

email 邮箱:drhxxkj@163.com

2022072119482661 808026766

分享本页
返回顶部
上云攻略全知道

企业上云,购买云服务器攻略帮您节省上云成本,价值千元 的上云攻略,让您省到就是赚到!

查看详情