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 :

Categories: Code

Yu

Ideals are like the stars: we never reach them, but like the mariners of the sea, we chart our course by them.

5 Comments

reizhi · July 1, 2014 at 16:33

Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

表示没有能力评论

    yu · July 5, 2014 at 14:15

    Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Mac OS X  10.9.4 Mac OS X 10.9.4

    @reizhi
    jquery api的调用而已

    另外,你的网站挂了快两天了

屠龙 · July 5, 2014 at 11:34

Google Chrome 21.0.1180.89 Google Chrome 21.0.1180.89 Windows XP Windows XP

你的网站的小插件还挺好玩

Sonullx Liu · July 20, 2014 at 08:56

Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 Windows 7

我喜欢在CSS文件里把各种情况都定义好,然后在JS里toggleClass()就行了。
在JS里混杂CSS代码,看着很别扭。

    yu · July 20, 2014 at 13:34

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

    @Sonullx Liu 赞,好主意

    不过这个是fix别人的代码,逻辑没问题语法没问题感觉就可以接受了

Leave a Reply

Your email address will not be published. Required fields are marked *