jquery升级到1.9x后,它的toggle方法只剩下了显示/隐藏一个特性。1.9-的引申含义"两个function轮流执行"这个feature被干掉了。按照官方说法是"提高模块化"之类,对个人就只剩下"我勒个擦怎么主题变丑啦"之类的效果。 原本在单个post的右上角有个按钮,你可以点击关闭侧边栏,两栏的博客瞬间变成一栏,再点又变了回来,@良心发现桑实在太有创意啦--可惜给升级毁了。

又到写代码很痛苦的时候了,妥妥的换个代码写几行的节奏!

检查一下,发现右上角那个“关闭侧边栏”的class是.showclose。再检查下主题的js,找到了如下的代码:

//侧边栏开关
$('.showclose').toggle(function(){
    $(this).text("✜ 显示侧边栏");
    $(".layout").css({ "border-right": "none", "background": "none" },300);
    $('#sidebar').hide(500).prev().animate({width: "859px"}, 1000);   
    },function(){
    $(this).text("♤ 关闭侧边栏");
    $(".layout").css({ "border-right": "1px solid #d5d5d5", "background": "#fff" },500);
    $('#sidebar').delay(800).slideDown(800).prev().animate({width: "640px"}, 800);
});

妥妥的,就是这个了。代码很清晰,点击一下换个function,两个function轮着换,jquery中改css属性。只可惜1.9+已经不能照搬了。 但是,没关系,咱写丑一点也是可以fix的。稍稍做了点改动如下:

$('.showclose').on("click",function(){
    if($(this).hasClass('showclose_extend')){
        $(this).removeClass('showclose_extend');
        $(this).text("♤ 关闭侧边栏");
        $(".layout").css({ "border-right": "1px solid #d5d5d5", "background": "#fff" },500);
        $('#sidebar').delay(800).slideDown(800).prev().animate({width: "640px"}, 800);
    }else {
        $(this).addClass('showclose_extend');
        $(this).text("✜ 显示侧边栏");
        $(".layout").css({ "border-right": "none", "background": "none" },300);
        $('#sidebar').hide(500).prev().animate({width: "859px"}, 1000);
    }
});

意思还是一样,给那个.showclose加个label,每次执行先检查label,根据label分别做不同的事情。

就这样轻松愉快的搞定了 -- 突然发现也没花几分钟,算啦,继续搬砖去。

References :

来自的你,很高兴你能看到这儿。若本文对你有所用处,或者内容有什么不足之处,敬请毫不犹豫给个回复。谢谢!