免插件纯代码实现WordPress站点隐藏/显示侧边栏

投稿  龙笑天下 2017-02-07 07:32 阅读 165 次 评论 14 条

最近有很多使用知言 Tinection 主题的人问我本站的“隐藏/显示侧边栏”功能怎么实现的,今天在此分享一下『Tinection 主题免插件实现 WordPress 隐藏/显示侧边栏』功能的相关实现方法。当然本方法不局限于 Tinection 主题,修改一下可适用于所有主题!

免插件纯代码实现WordPress站点隐藏/显示侧边栏

免插件实现 WordPress 隐藏/显示侧边栏步骤

请大家跟着下面的步骤走,即可实现“点击按钮隐藏/显示侧边栏”,具体的结构和效果可以参考本站(龙笑天下),祝成功!

第一步:添加隐藏/显示边栏按钮

根据需要在页面相应位置添加显示和隐藏按钮,代码:

  1. <span class="lxtxxsycbl">
  2.     <a style="cursor:pointer;" id="stb_btn_kuan" title="Close the sidebar">隐藏边栏</a>
  3. </span>

第二部:添加 JS 代码

在主题相应的 js 文件中加入以下 js 代码:

  1. jQuery(document).ready(function($) {
  2.     $('.lxtxxsycbl').click(function() {
  3.         if ($('.lxtxxsycbl a').is('#stb_btn_kuan')) {
  4.             $('#sidebar').hide();
  5.             $('#main-wrap-left').attr("id""main-wrap-fulltp");
  6.             $('#single-blog-wrap').removeClass("two-col-container container");
  7.             $('.lxtxxsycbl a').attr("id""stb_btn_zhai").attr("title""Open the sidebar").text("显示边栏");
  8.         } else if ($('.lxtxxsycbl a').is('#stb_btn_zhai')) {
  9.             $('#sidebar').show();
  10.             $("#main-wrap-fulltp").attr("id""main-wrap-left");
  11.             $("#single-blog-wrap").addClass("two-col-container container");
  12.             $('.lxtxxsycbl a').attr("id""stb_btn_kuan").attr("title""Close the sidebar").text("隐藏边栏");
  13.         }
  14.     })
  15. });

第三部:添加 css 代码

在 style.css 样式表中添加如下样式:

  1. #main-wrap-fulltp {
  2.     margin:0px auto;
  3. }
  4. #main-wrap-fulltp {
  5.     max-width:1200px;
  6. }
  7. #main-wrap-fulltp .single-text {
  8.     max-width:960px;
  9.     margin:0 auto;
  10.     padding:10px;
  11. }
  12. @media screen and (min-width:1500px) {
  13.     #main-wrap-fulltp {
  14.     max-width:1392px;
  15. }
  16. }@media screen and (max-width:1499px) and (min-width:1360px) {
  17.     #main-wrap-fulltp {
  18.     max-width:1250px;
  19. }
  20. }@media screen and (max-width:1240px) and (min-width:641px) {
  21.     #main-wrap-fulltp {
  22.     width:98%;
  23. }
  24. }#main-wrap-fulltp .relpost-inner-pic,#main-wrap-fulltp .relpost-inner-pic span {
  25.     max-height:190px;
  26. }
  27. @media screen and (max-width:860px) {
  28.     .lxtxxsycbl {
  29.     display:none;
  30. }
  31. }

友情提示:一定要注意,各个标签、id、class、命名等需相对应!

其他相关文章

文章标签: ,   ,  
原文地址:http://www.ilxtx.com/hide-show-sidebar.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙笑天下 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. 免费拿路由器
    免费拿路由器 【县长】 @回复

    可以 我用的就是这个主题

  2. 明月登楼的博客
    明月登楼的博客 【总理】 @回复

    不错,赞一个!

  3. 姜辰
    姜辰 【市长】 @回复

    会玩会玩~~~

  4. 杭州SEO优化
    杭州SEO优化 【镇长】 @回复

    不错 可以啊

  5. 一介小民
    一介小民 【市长】 @回复

    重复投稿啊,已经有这篇 文章了吧

  6. 靠谱学生兼职网
    靠谱学生兼职网 【市长】 @回复

    这个功能虽然不错,但是我自己来说还是算了,少折腾就好

  7. 残酷娱乐网
    残酷娱乐网 【农民】 @回复

    更新分享,不错的功能!

  8. 复然网赚博客
    复然网赚博客 【镇长】 @回复

    不错的功能!

  9. Koolight
    Koolight 【省长】 @回复

    功能越多,请求次数也越多,世上就没有越简单越强大的说法啊!

  10. 爱时尚
    爱时尚 【省长】 @回复

    插件用多了确实不好,这些功能挺好的

  11. 金榜台博客
    金榜台博客 【市长】 @回复

    确实是挺实用的

  12. 分钱榜
    分钱榜 【县长】 @回复

    挺实用的一个功能。