引入jquery文件

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

html块代码


<div class="listbox" style=" width:300px; height: auto;">
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<li><a href="#">佳能</a><i>1545</i></li>
	<div class="show-more">
		<a href=""><span>更多评论</span></a>
	</div>
</div>
<style>
.show-more{ width:100px; margin:0 auto; height:30px; line-height:30px; border:1px solid #666; background:#CCC; color:#FFF; margin-bottom:10px;}
.show-more a{ ?font-size:12px; text-align:center; color:#000; display:block; width:100px; height:30px; text-decoration:none;}
</style>	

CSS样式表

jquery代码

<script>
	$(function(){
		var $list= $(".listbox li:gt(5)")
                // gt(5) 为显示几天默认从0起,实际显示6条
		$list.hide();
		var $showmore=$("div .show-more>a");
		$showmore.click(function(){
			if($list.is(":visible")){
				$list.hide();
				$(".show-more a span").text("更多评论")
			}else{
				$list.show();
				$(".show-more a span").text("隐藏评论")
			}
			return false;
		})
	})
</script>

发表评论

共有 0 条评论