RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
Jquery怎么实现更多选项的功能-创新互联

这篇文章主要介绍“Jquery怎么实现更多选项的功能”，在日常操作中，相信很多人在Jquery怎么实现更多选项的功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Jquery怎么实现更多选项的功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

十年的七台河网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整七台河建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“七台河网站设计”,“七台河网站推广”以来，每个客户项目都认真落实执行。

筛选功能如图：


Jquery怎么实现更多选项的功能


这里只实现以下两个功能

  1. 更多选项。点击切换收起选项。

  2. 点击条目在上面显示已点击条目。

首先是Html代码：这里主要的代码是：



			笔记本
品牌：
  • 联想
  • 索尼
  • 三星
  • 尼康
  • 松下
  • 卡西欧
  • 富士
  • 柯达
  • 宾得
  • 理光
  • 奥林巴斯
  • 明基
  • 爱国者
  • AAA
  • 明基
  • 爱国者
  • BBBB
  • 明基
  • 爱国者
  • 其它
    • 价格：
  • 0-1000
  • 1001-2000
  • 2001-3000
  • 3000-~
    • 尺寸：
  • 14
  • 15.6
  • 21
  • 29
    • 触控：
  • 普通触控
  • PC平板二合一
  • 非触控
    • 处理器：
  • Intel i3
  • Intel i5
  • Intel i7
  • AMD A6
    • 厚度：
  • 刀锋轻薄
  • 便携轻薄
  • 普通轻薄
    • 显卡：
  • 入门级独显
  • 性能级独显
  • 玩家级独显
    • 大家说：
  • 配置不错
  • 散热很好
  • 外观不错
  • 屏幕大
    • 更多选项（处理器，厚度，显卡，大家说)

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

    另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


    网页题目：Jquery怎么实现更多选项的功能-创新互联
    分享网址：http://www.jxjierui.cn/article/dspihp.html

    其他资讯

    快速导航
    友情链接
    网站建设
    联系方式
    • 企业：青羊区浩晨众云设计工作室（个体工商户）
    • 地址：成都市青羊区太升南路288号
    • 电话：18980820575
    • 网址：www.jxjierui.cn

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

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

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