jQuery实战之品牌展示列表效果

　　只是初始状态；

jQuery实战之品牌展示列表效果

　　这是点击后效果。首相分析下需求：

　　1，首先在页面中创建导航，单击标题的时候，隐藏内容，同时小图标也改变。

　　2，单击更多的时候，显示隐藏的链接内容，并将"更多"变成"简化"，改变小图标，并高亮部分链接。

　　下面是完整代码：

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

　　<html>

　　<head>

　　</script>

　　*{ margin:0;padding:0;}

　　body{ font-size:13px;}

　　#wraper{ border:1px solid #ccc; width:301px; overflow:hidden;}

　　#wraper .Head{ background;#eee; padding:8px; height:18px; cursor:pointer;}

　　#wraper .Head h3{ float:left;}

　　#wraper .Head span{ float:right; margin-top:3px;}

　　#wraper .Content{ padding:8px;}

　　#wraper .Content ul{ list-style:none; list-style-type:none;}

　　#wraper .Content ul li{ float:left; width:95px; height:23px; line-height:23px;}

　　#wraper .Bot{ float:right; padding-top:5px; padding-bottom:5px;}

　　.GetFocus{ background:#eee;}

　　.one{ color:#ff8000;}

　　</style>

　　$(function(){//页面加载事件

　　$(".Head").click(function(){//图片单击事件

　　if($(".Content").is(":visible")){//如果内容可见

　　$(".Head span img").attr("src","Images/a1.gif");//改变图片

　　//隐藏内容

　　$(".Content").hide();

　　}else{

　　$(".Head span img").attr("src","Images/a2.gif");//改变图片

　　$(".Content").show();

　　}

　　});

　　var $chaLi = $(".Bot > a") ;

　　var $prompt = $("ul li:gt(4):not(:last)")

　　$prompt.hide();

　　$($chaLi).click(function(){//热点链接单击事件

　　//如果内容为简化

　　if($chaLi.text() == "更多"){

　　//隐藏大于4 且不是最后一项的所有内容

　　$(".Bot img").attr("src","Images/a7.gif")

　　$prompt.show().addClass("GetFocus");

　　$("ul li").filter(":contains('青年'),:contains('老人'),:contains('少年')").addClass("one")

　　$($chaLi).text("简化");

　　}else{

　　$prompt.hide()

　　$(".Bot img").attr("src","Images/a6.gif")

　　$($chaLi).text("更多");

　　}

　　})

　　</script>

　　</head>

　　<body>

　　</div>

　　<ul>

　　</ul>

　　</div>

　　</div>

　　</body>

　　</html>

教程首页更多教程