第一种方法(简洁版)亲测可用
1.在header.php中添加如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script> jQuery(document).ready(function($) { $('.close-sidebar').click(function() { $('.close-sidebar,.sidebar').hide(); $('.show-sidebar').show(); $('.content').animate({ width: "1265px" }, 0); }); $('.show-sidebar').click(function() { $('.show-sidebar').hide(); $('.close-sidebar,.sidebar').show(); $('.content').animate({ width: "885px" }, 0); }); }); </script> |
代码说明:将其中的1265px、885px、.content、.sidebar修改为你主题对应的文章内容页+侧边栏宽度、文章页内容宽度、文章内容容器、侧边栏容器即可。
2.在你布置该按钮的地方添加如下代码,一般是添加到文章标题下面,当然代码可以根据你自己的主题稍作修改。
1 2 3 4 | <span class="bianlan"> <span class="close-sidebar">隐藏侧边</span> <span class="show-sidebar" style="display:none;">显示侧边</span> </span> |
第二种方法(美化版)自行测试
1. 添加隐藏/显示边栏按钮
根据需要在页面相应位置添加显示和隐藏按钮,代码:
1 2 3 | <span class="lxtxxsycbl"> <a style="cursor:pointer;" id="stb_btn_kuan" title="Close the sidebar">隐藏边栏</a> </span> |
2 .添加JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | jQuery(document).ready(function($) { $('.lxtxxsycbl').click(function() { if ($('.lxtxxsycbl a').is('#stb_btn_kuan')) { $('#sidebar').hide(); $('#main-wrap-left').attr("id", "main-wrap-fulltp"); $('#single-blog-wrap').removeClass("two-col-container container"); $('.lxtxxsycbl a').attr("id", "stb_btn_zhai").attr("title", "Open the sidebar").text("显示边栏"); } else if ($('.lxtxxsycbl a').is('#stb_btn_zhai')) { $('#sidebar').show(); $("#main-wrap-fulltp").attr("id", "main-wrap-left"); $("#single-blog-wrap").addClass("two-col-container container"); $('.lxtxxsycbl a').attr("id", "stb_btn_kuan").attr("title", "Close the sidebar").text("隐藏边栏"); } }) }); |
3 .添加Css
在style.css样式表中添加如下样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #main-wrap-fulltp { margin:0px auto; } #main-wrap-fulltp { max-width:1200px; } #main-wrap-fulltp .single-text { max-width:960px; margin:0 auto; padding:10px; } @media screen and (min-width:1500px) { #main-wrap-fulltp { max-width:1392px; } }@media screen and (max-width:1499px) and (min-width:1360px) { #main-wrap-fulltp { max-width:1250px; } }@media screen and (max-width:1240px) and (min-width:641px) { #main-wrap-fulltp { width:98%; } }#main-wrap-fulltp .relpost-inner-pic,#main-wrap-fulltp .relpost-inner-pic span { max-height:190px; } @media screen and (max-width:860px) { .lxtxxsycbl { display:none; } } |
2020年10月9日 上午9:28 沙发
买单号,上单号网www.danhw.com