<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");
}
);