《项目练习》信息栏的展开与收回

最新推荐文章于 2022-06-17 23:38:35 发布

欧启鑫

最新推荐文章于 2022-06-17 23:38:35 发布

阅读量82

点赞数

分类专栏：项目总结

本文链接：https://blog.csdn.net/weixin_49321034/article/details/107983136

版权

项目总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
	$(function() {
	    /*初始状态，其他品牌隐藏*/
	    var gt5=$("li:gt(5)");
        gt5.not(":last").hide();
        var dd=$("div div");

        /*控制信息展开收回*/
	    $("div div a").live("click",function () {
            $(gt5).not(":last").toggle();
			控制列表的展开收回
			
			if( $(gt5).not(":last").is(":hidden") ){
			判断列表是否为展开
			
                $("li").removeClass("promoted")
                去除文本高亮
                
                $("div div a span").text("展开")
                修改按钮
                
                dd.removeClass();
                dd.addClass("showmore")
                修改图片
                
			}else {
			    $("li:contains('爱国者')").addClass("promoted");
                $("li:contains('松下')").addClass("promoted");
                $("li:contains('柯达')").addClass("promoted");
                添加文本高亮
                
                $("div div a span").text("收回");
                dd.removeClass();
                dd.addClass("showless")
			}
            return false;
        })
	});
</script>

<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>

在这里插入图片描述

欧启鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《项目练习》信息栏的展开与收回

<script type="text/javascript"> $(function() { /*初始状态，其他品牌隐藏*/ var gt5=$("li:gt(5)"); gt5.not(":last").hide(); var dd=$("div div"); /*控制信息展开收回*/ $("div div a").live("click",function () { $(gt5).not
复制链接

扫一扫