jquery点击功能总是在第二次点击时触发

Question

我将此点击功能与cookie.js结合使用：

$("#mobileBar").show();

    var cS = $.cookie("sidebar");
    if(cS == "close") {
        $(".sidebar").css("left", "-44px");
        $("#mobileBar")
                    .css("left","0px")
                    .addClass("active");
        $(".sidecontent")
                    .css("left","-225px")
                    .hide();
    }

$("#mobileBar").on("click", function(){
        var $theElem = $(this);
        if (!$theElem.attr('data-toggled') || $theElem.attr('data-toggled') == 'off') {

           $theElem.attr('data-toggled','on')
                   .animate({left: "0px"})
                   .addClass("active");
            $.cookie("sidebar", "close", { expires: 7, path: "/" });
            $(".sidebar").animate({left: "-44px"});
            $(".sidecontent")
                   .css("left","-225px")
                   .hide();

        } else if ($theElem.attr('data-toggled') == 'on'){

            $.removeCookie("sidebar");
            $(".sidecontent")
                    .css("left","-225px")
                    .hide();
            $(".sidebar").animate({left: "0px"});
            $theElem.animate({left: "33px"})
                     .removeClass("active")
                     .attr('data-toggled','off');
        }
    });

#mobileBar仅在iPad，iPhone等上可见。

我也在桌面上测试了这个功能，但它总是在第二次点击或第二次点击时触发。

实时点击也不会在第一次操作时触发。