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

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

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

第一步：给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