子比主题文章页隐藏侧边栏按钮

子比主题文章页隐藏侧边栏按钮- 花猪资源网
子比主题文章页隐藏侧边栏按钮
此内容为免费阅读,请登录后查看
0
免费阅读
图片[1]- 子比主题文章页隐藏侧边栏按钮
图片[2]- 子比主题文章页隐藏侧边栏按钮

安装有点点复杂,嫌麻烦的可以装别人刚刚发的。
教程开始
在文章页/inc/functions/zib-single.php大概在367行插入下方代码,看图

图片[3]- 子比主题文章页隐藏侧边栏按钮
<div class=”clearfix ml6″>
<label class=”toggle-switch” data-tooltip=”点击关闭侧边栏”>
<input type=”checkbox” id=”toggle-sidebar”>
<span class=”slider”></span></label>
<style>.toggle-switch{position:relative;display:inline-block;width:46px;height:24px;top:5px}.toggle-switch[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:5px 10px;background-color:#6345eb;color:#fff;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s;margin-bottom:5px}.toggle-switch:hover[data-tooltip]:before{opacity:1;visibility:visible}@media (max-width:768px){.toggle-switch{display:none}}.toggle-switch input[type=checkbox]{position:absolute !important;opacity:0 !important;width:0 !important;height:0 !important;background:0 0 !important;border:none !important;box-shadow:none !important}.toggle-switch input[type=checkbox]:checked{background:0 0 !important;border:none !important;box-shadow:none !important}.toggle-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:22px}.toggle-switch .slider:before{position:absolute;content:””;height:16px;width:16px;left:7px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-switch input[type=checkbox]:checked+.slider{background-color:var(–focus-color) !important}.toggle-switch input[type=checkbox]:checked+.slider:before{transform:translateX(18px)}</style></div>

在后台自定义JS插入下方代码

<script>$(document).ready(function(){$(document).ajaxComplete(function(event,xhr,settings){$(‘.modal-dialog’).each(function(){if($(this).find(‘.modal-close-text’).length===0){var reminder=$(‘<span class=”modal-close-text” style=”position: absolute;bottom: -35px;z-index: 99;left: 0;right: 0;text-align: center;color: #efefef;user-select: none;pointer-events: none;”>点击任意地方关闭</span>’);$(this).prepend(reminder);}});});$(document).on(‘hidden.bs.modal’,’.modal’,function(){$(this).find(‘.modal-close-text’).remove();});});</script>
<script>jQuery(document).ready(function($){const toggleBtn=$(‘#toggle-sidebar’);const toggleLabel=$(‘.toggle-switch’);const sidebar=$(‘.sidebar’);const contentLayout=$(‘.content-layout’);if(localStorage.getItem(‘sidebarHidden’)===null){localStorage.setItem(‘sidebarHidden’,’false’);}
function updateTooltip(isHidden){toggleLabel.attr(‘data-tooltip’,isHidden?’点击展开侧边栏’:’点击关闭侧边栏’);}
function initSidebarState(){const isHidden=localStorage.getItem(‘sidebarHidden’)===’true’;toggleBtn.prop(‘checked’,isHidden);if(isHidden){sidebar.hide();contentLayout.css({‘width’:’100%’,’flex’:’0 0 100%’,’max-width’:’100%’});}else{sidebar.show();contentLayout.css({‘width’:”,’flex’:”,’max-width’:”});}updateTooltip(isHidden);}initSidebarState();toggleBtn.on(‘change’,function(){const isChecked=$(this).is(‘:checked’);if(isChecked){sidebar.hide();contentLayout.css({‘width’:’100%’,’flex’:’0 0 100%’,’max-width’:’100%’});localStorage.setItem(‘sidebarHidden’,’true’);}else{sidebar.show();contentLayout.css({‘width’:”,’flex’:”,’max-width’:”});localStorage.setItem(‘sidebarHidden’,’false’);}updateTooltip(isChecked);});});</script>

教程二
代码放在 inc/functions/functions.php 最下面

© 版权声明
评论 抢沙发

请登录后发表评论

    暂无评论内容