jquery 选择器 a 更多简化

qqxu10

于 2016-06-22 14:13:52 发布

阅读量398

点赞数

分类专栏： javascript 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/u013415189/article/details/51733919

版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的显示隐藏效果案例。通过点击“更多”按钮，可以展开或收起列表中的额外项，实现了简洁与扩展性的平衡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>

<body>
<ul>
<li>ffff</li>
<li>ddd</li>
<li style="display:none">rrrr</li>
<li style="display:none">wwww</li>
<a id="moreInfo" href="javascript:;" οnclick="showMore(this.id)">更多</a>
</ul>
<script>

function showMore(btnid){

//ID选择器需要加“#”

if($("#moreInfo").html()=="更多"){
$("li:hidden").show();
$("#moreInfo").html("简化");
}else{
$("li:eq(2)").css("display","none");
$("li:eq(3)").css("display","none");
$("#moreInfo").html("更多");
}
}
</script>
</body>

</html>