前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Fly主题关闭打开侧边栏(不带Cookie)代码

Fly主题关闭打开侧边栏(不带Cookie)代码

作者头像
用户8099761
发布2023-05-10 20:02:54
2590
发布2023-05-10 20:02:54
举报
文章被收录于专栏:私人订制私人订制

贴出本站关闭打开侧边栏(不带Cookie),适用于大前端主题;想要Cookie,百度有实例,接下来是代码部分了

php部分

代码语言:javascript
复制
<div class="close-sidebar" data-original-title="显示/关闭侧边栏"><a href="javascript:;">关闭侧边栏</a></div>
<div class="show-sidebar" data-original-title="显示/关闭侧边栏" style="display:none;"><a href="javascript:;">显示侧边栏</a></div>

CSS部分

代码语言:javascript
复制
.close-sidebar,.show-sidebar{float:right;margin:-65px -13px 0 0;padding:5px 10px;text-align: center;text-shadow: 0 1px 1px #ccc;border: 1px solid #ccc;border-bottom-color: #bbb;border-radius: 1px;box-shadow: 0 2px 2px #ddd;}
.close-sidebar a,.show-sidebar a{color:#333;}
.close-sidebar:hover,.show-sidebar:hover{background:#f6f6f6;}
.close-sidebar:active,.show-sidebar:active{background:#f6f6f6;box-shadow: inset 0 2px 4px #ddd;}

JS部分

代码语言:javascript
复制
jQuery(document).ready(function($){
$('.close-sidebar').click(function(){
    $('.close-sidebar,.sidebar').hide();
    $('.show-sidebar').show();
    $('.content').animate({
        width: "1200px"
    },
    1000);})
$('.show-sidebar').click(function(){
    $('.show-sidebar').hide();
    $('.close-sidebar').show();
    setTimeout(function () {$('.sidebar').show();}, 1000);
    $('.content').animate({
        width: "820px"
    },
    1000);})
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-9-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档