jquery升级后toggle的一个feature失效的fix

After upgrading jQuery to 1.9.x, its .toggle() method only kept the show/hide behavior. The pre-1.9 extended meaning—toggling between two functions on each click—was removed. The official reason was something like “improving modularity,” but for individuals all that remained was an effect like “Holy crap, why does the theme suddenly look ugly?”

Originally, in the top-right corner of each post there was a button you could click to close the sidebar, and the two-column blog instantly became a single column; click again and it went back. @良心发现 was so creative—unfortunately, the upgrade broke it.

Time for the painful coding part again—definitely a rewrite-a-few-lines-of-code moment!

A quick check showed that the “close sidebar” button in the top-right corner had the class .showclose. Checking the theme’s JS, I found the following code:

JavaScript

//侧边栏开关
$('.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);
});

Yep, that’s it. The code is clear: one click switches to the other function, alternating between two functions and modifying CSS properties in jQuery. It’s just that this can’t be copied directly in 1.9+ anymore.

But that’s fine; we can still fix it even if the code looks a bit ugly. I made a small tweak as shown below:

JavaScript

$('.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);
	}
});