jQuery学习笔记1 类别展开收起
来源：互联网 发布：vb instr函数用法 编辑：程序博客网 时间：2024/06/04 18:12
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo2.aspx.cs" Inherits="jQuery.demo2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>demo2</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
var $category = $("ul li:gt(5):not(:last)");//获得索引值大于5的品牌的集合对象（除了最后一条）
$category.hide();//隐藏上面获取的jQuery对象
var $toggleBtn = $("div.showmore>a");//获取"显示全部品牌"按钮
$toggleBtn.click(function () {//给按钮添加onclick时间
if ($category.is(":visible")) {//如果元素显示
$category.hide();//隐藏$category
$(".showmore a span").text("显示全部品牌");//改变文本
$("ul li a").removeClass("promoted");//去掉特殊样式
}
else {
$category.show(); //显示$category
$(".showmore a span").text("精简显示品牌"); //改变文本
$("ul li a").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");//添加特殊样式
}
return false;//超链接不跳转
});
});
</script>
<style type="text/css">
a
{
text-decoration: none;
}
*
{
font-size: 12px;
}
.promoted
{
color: Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<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>(1446)</i></li>
<li><a href="#">爱国者</a><i>(3091)</i></li>
<li><a href="#">其他品牌相机</a><i>(7275)</i></li>
</ul>
</div>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</form>
</body>
</html>
- jQuery学习笔记1 类别展开收起
- jquery 菜单展开收起
- jquery图片展开收起
- jquery javascript 展开收起
- jQuery学习笔记（3）---点击触发菜单的展开与收起
- zTree学习笔记二：展开树和收起树
- 展开、收起div的jQuery代码
- jquery 控制文字域展开收起
- jQuery实现页面详情展开收起
- JQuery 向下展开收起动画( slideDown(),slideUp() )
- jquery实现更多内容的（展开/收起 功能）
- jsp页面基于jQuery收起展开的动作效果
- JQuery 动画实例：下拉列表框展开收起
- 展开收起特效
- 展开与收起效果
- js 展开收起效果
- 展开与收起效果
- js图片展开收起
- 手机已成生活必需品 移动广告更易被接受
- 16.GridView突出显示某一单元格（例如金额低于多少，分数不及格等）
- 1869六度分离
- ajax学习笔记
- Geolocation --- 基于浏览器的定位服务
- jQuery学习笔记1 类别展开收起
- HyperV虚拟化技术资料集锦+学习HyperV的一点心得体会
- 17.GridView加入自动求和求平均值小计
- 如何成为一个出色的网站架构师
- bash shell命令
- Android 中的 Service 总结
- 分类汇总以后,拷贝出汇总后的数据
- java user agent utils
- UVa 579 - ClockHands
