jQuery点击展开伸缩且背景变换效果

<script type="text/javascript">
	$(document).ready(function(){
		$(".list-3").toggle(function(){
			$(this).next(".list-2").animate({height: 'toggle', opacity: 'toggle'}, "slow");
			$(this).addClass("on");
		},
		function(){
			$(this).next(".list-2").animate({height: 'toggle', opacity: 'toggle'});
			$(this).removeClass("on");
		});
	});
</script>
<style type="text/css">
.list-2{ display:none;}	
.list-2.on{ display:block;}
</style>
<div>
	<ul>
		<li>
			<div class="list-1">111</div>
			<div class="list-3">333</div>
			<div class="list-2">222</div>
		</li>
		<li>
			<div class="list-1">111</div>
			<div class="list-3">333</div>
			<div class="list-2">222</div>
		</li>
	</ul>
</div>

点击展开伸缩且背景变换效果，需要注意的是，“list-3”一定要在“list-2”前面，因为$(this).next(".text")只会识别下一个相邻的同级元素

可以直接套用：

$("classname").toggle(
    function () {
        $(this).addClass("selected");
    },
    function () {
        $(this).removeClass("selected");
    }
);