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

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

 

1589084571-6cfced683e652c0

第一步:给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.s5g.net/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

免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » WordPress边栏增加可展开收缩FAQ问答列表样式,html页面+Css样式+jQuery代码全面分享

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情