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怎么实现更多选项的功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

快速导航

• 简阳机房托管
• 网站优化推广
• 青白江叉车公司
• 成都平面广告设计
• h5页面制作
• scfdjwx.com
• 成都医疗纯水设备

友情链接

网站制作 网站建设 网络推广 网站推广 小程序开发 网站导航

网站建设

• 内江浩晨众云建站
• 网站导航

联系方式

• 企业：青羊区浩晨众云设计工作室（个体工商户）
• 地址：成都市青羊区太升南路288号
• 电话：18980820575
• 网址：www.jxjierui.cn

公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575

网站备案号：蜀ICP备2025119795号-2

内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 成都做网站