更多选项（处理器，厚度，显卡，大家说)
CSS代码：
Css代码我就不去解释了。
这里主要是Jquery代码。可能我的方法不是很到位，希望各位见谅啊。有更好的可以盖楼。一定改进的。
$(document).ready(function() {
//定义一个数组。用于存放每个条目的内容
var arr = new Array();
//初始化 刚开始就将第3个以后的隐藏起来。
var $category = $("div.attr:gt(3)");
$category.hide();
//详细和精简的切换代码。
$("div.showmore > a").click(function() {
if (!$category.is(":visible")) {
$category.show();
$(".showmore a span").css("background", "url(./img/up.gif) no-repeat 0 0").text("收起");
} else {
$category.hide();
$(".showmore a span").css("background", "url(./img/down.gif) no-repeat 0 0").text("更多选项（处理器，厚度，显卡，大家说)");
}
});
//从这里开始就是响应点击条目的事件了。
$("#pingpai > li >a").click(function() {
//先清空div
$(".mt div").empty();
arr[0] = $(this).text();
print_r();
});
$("#price > li").click(function() {
$(".mt div").empty();
arr[1] = $(this).text();
print_r();
});
$("#chicun > li").click(function() {
$(".mt div").empty();
arr[2] = $(this).text();
print_r();
});
$("#chukong > li").click(function() {
$(".mt div").empty();
arr[3] = $(this).text();
print_r();
});
$("#cpu > li").click(function() {
$(".mt div").empty();
arr[4] = $(this).text();
print_r();
});
$("#height > li").click(function() {
$(".mt div").empty();
arr[5] = $(this).text();
print_r();
});
$("#xiankao > li").click(function() {
$(".mt div").empty();
arr[6] = $(this).text();
print_r();
});
$("#allspeak > li").click(function() {
$(".mt div").empty();
arr[7] = $(this).text();
print_r();
});
//循环打印数组
function print_r() {
if (arr.length > 0) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] != undefined) {
var txt = $("").text(arr[i]);
$(".mt div").append(txt).fadeIn();
}
}
}
}
//jquery动态响应点击事件，响应点击之后删除条目
$(document).on('click', 'b', function() {
arr[$(this).attr("name")] = undefined;
$("b[name='" + $(this).attr("name") + "']").fadeOut(500);
});
});到此，关于“Jquery怎么实现更多选项的功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
文章题目：Jquery怎么实现更多选项的功能
本文来源：http://cdxtjz.cn/article/gijppp.html
