版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/asdf_123123/article/details/89337117
单击显示更多、隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var base = $("li:gt(2)");
base.hide();
// console.log(base.is(":hidden"));
$("#more_btn").click(function() {
if(base.is(":hidden")){
// 默认隐藏，当状态为隐藏时，点击更多，展示内容，并修改按钮内容
base.show();
$("#more_btn").text("隐藏");
}else{
// 当状态为展示时，隐藏内容，修改按钮为更多
base.hide();
$("#more_btn").text("更多");
}
});
});
</script>
</head>
<body>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<button id="more_btn">更多</button>
</body>
</html>