基础jQ问题，3-13节。
初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.
当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.
当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.
2 回答
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<style>
li{display:none;}
.show{display:block;}
</style>
<script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
<ul>
<li class="show">item01</li>
<li class="show">item02</li>
<li class="show">item03</li>
<li class="show flag">item04</li>
<li class="">item05</li>
<li class="">item06</li>
<li class="show">item07</li>
</ul>
<a href="#">更多</a>
<script>
$("a").click(function(){
var $this = $(this),
val = $this.html();
if(val === '更多'){
$this.html('简化');
$('li').addClass('show');
}else{
$this.html('更多');
$('li.flag~li').removeClass('show');
$('li:last-child').addClass('show');
}
return false;
});
</script>
</body>
</html>举报
0/150
提交
取消
