jQueryでis(':visible')を使った着色

jQuery

前回の記事で使用したソースへの追記です
jQueryを使って領域外のクリックイベントで消えるボックスを複数設定 - Surflog 2.0

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>jQuery Click Outside Test</title>
<style>
a {
	color: inherit;
}
.content {
	display: none;
	width: 400px;
	height: 80px;
}
.red { background-color: red; }
.green { background-color: green;}
.blue { background-color: blue;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var isMouseHover = false;
$(document).ready(function(){
	$('ul.show-content li').bind('click', function(){
		var color = $(this).data('color');
		$('div#'+color).toggle();
		// :visible を使った分岐
		var isVisible = $('div#'+color).is(':visible');
		if(isVisible) $(this).css('color' ,'#ccc');
	});
	$('div.content').hover(function(){
		isMouseHover = true;
	}, function(){
		isMouseHover = false;
	});
	$('body').mouseup(function(){
		if(!isMouseHover) $('div.content').hide();
	// ボックスを消す際に、すべての文字色をリセット
		$('ul.show-content li').css('color', '#000');
	});
	$('.content.red').show();
});
</script>
</head>
<body>
<ul class="show-content">
	<li data-color="red"><a href="javascript:void(0)">Red</a></li>
	<li data-color="green"><a href="javascript:void(0)">Green</a></li>
	<li data-color="blue"><a href="javascript:void(0)">Blue</a></li>
</ul>
<div class="content red" id="red">Red</div>
<div class="content green" id="green">Green</div>
<div class="content blue" id="blue">Blue</div>
</body>
</html>