Jquery怎么实现更多选项的功能-创新互联

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

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

筛选功能如图：


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


这里只实现以下两个功能

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

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

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


<div class="SubCategoryBox">
			<div class="mt"><span>笔记本</span><div></div></div>
			<div class="attr">
				<span>品牌：</span>
				<div class="ul_list">
					<ul id="pingpai">
						<li><a href="#">联想</a></li>
						<li><a href="#">索尼</a></li>
						<li><a href="#">三星</a></li>
						<li><a href="#">尼康</a></li>
						<li><a href="#">松下</a></li>
						<li><a href="#">卡西欧</a></li>
						<li><a href="#">富士</a></li>
						<li><a href="#">柯达</a></li>
						<li><a href="#">宾得</a></li>
						<li><a href="#">理光</a></li>
						<li><a href="#">奥林巴斯</a></li>
						<li><a href="#">明基</a></li>
						<li><a href="#">爱国者</a></li>
						<li><a href="#">AAA</a></li>
						<li><a href="#">明基</a></li>
						<li><a href="#">爱国者</a></li>
						<li><a href="#">BBBB</a></li>
						<li><a href="#">明基</a></li>
						<li><a href="#">爱国者</a></li>
						<li><a href="#">其它</a></li>
					</ul>
				</div>
				
			</div>
			<div class="attr">
				<span>价格：</span>
				<div class="ul_list">
					<ul id="price">
						<li><a href="#">0-1000</a></li>
						<li><a href="#">1001-2000</a></li>
						<li><a href="#">2001-3000</a></li>
						<li><a href="#">3000-~</a></li>
					</ul>
				</div>
			</div>
			<div class="attr">
				<span>尺寸：</span>
				<div class="ul_list">
					<ul id="chicun">
						<li><a href="#">14</a></li>
						<li><a href="#">15.6</a></li>
						<li><a href="#">21</a></li>
						<li><a href="#">29</a></li>
					</ul>
				</div>
			</div>
			<div class="attr">
				<span>触控：</span>
				<div class="ul_list">
					<ul id="chukong">
						<li><a href="#">普通触控</a></li>
						<li><a href="#">PC平板二合一</a></li>
						<li><a href="#">非触控</a></li>
					</ul>
				</div>
			</div>
			<div class="attr">
				<span>处理器：</span>
				<div class="ul_list">
					<ul id="cpu">
						<li><a href="#">Intel i3</a></li>
						<li><a href="#">Intel i5</a></li>
						<li><a href="#">Intel i7</a></li>
						<li><a href="#">AMD A6</a></li>
					</ul>
				</div>
			</div>
			<div class="attr">
				<span>厚度：</span>
				<div class="ul_list">
					<ul id="height">
						<li><a href="#">刀锋轻薄</a></li>
						<li><a href="#">便携轻薄</a></li>
						<li><a href="#">普通轻薄</a></li>
					</ul>
				</div>
			</div>
			<div class="attr">
				<span>显卡：</span>
				<div class="ul_list">
					<ul id="xiankao">
						<li><a href="#">入门级独显</a></li>
						<li><a href="#">性能级独显</a></li>
						<li><a href="#">玩家级独显</a></li>
					</ul>
				</div>
			</div>
			<div class="attr">
				<span>大家说：</span>
				<div class="ul_list">
					<ul id="allspeak">
						<li><a href="#">配置不错</a></li>
						<li><a href="#">散热很好</a></li>
						<li><a href="#">外观不错</a></li>
						<li><a href="#">屏幕大</a></li>
					</ul>
				</div>
			</div>
			<div class="showmore">
				<a href="javascript:void(0)"><span>更多选项（处理器，厚度，显卡，大家说)</span></a>	
				
			</div>


		</div>

CSS代码：

<style>
		 *{ margin:0; padding:0;}
		body {font-size:12px;text-align:center;}
		a { color:#04D; text-decoration:none;}
		a:hover { background-color:#ABCDEF; text-decoration:none;}
		.SubCategoryBox {width:800px;margin:0 auto; text-align:center;margin-top:40px;border:1px solid #ccc;}
		.SubCategoryBox .mt {float:left;width:780px;height:50px;text-align:left;background-color:#f7f7f7;padding:0 10px;line-height: 50px;border-bottom: 1px solid #ccc;}
		.SubCategoryBox .mt span {float:left;width:50px;height:20px;text-align:left;background-color:#f7f7f7;padding:0 10px;color: red;}
		.SubCategoryBox .mt div {float:right;width:700px;height:20px;text-align:left;background-color:#f7f7f7;}
		.SubCategoryBox .mt div b {background-color:#FCFCFC; border:1px solid #ccc;margin-right:10px;color:#FF6A6A;padding: 2px;cursor:pointer;}
		.s {padding: 2px;cursor:pointer;color:#912CEE;}
		.SubCategoryBox .attr{
			float:left;width:780px;text-align: left;background-color:#f7f7f7;padding:0 10px;color: red;border-bottom: 1px dashed #ccc;
		}
		.SubCategoryBox .attr span {float:left;text-align: right;width:50px;padding-top: 10px;}
		.SubCategoryBox .attr .ul_list {float:left;text-align: left;padding-bottom: 10px;padding-top: 10px;}
		.SubCategoryBox .attr .ul_list ul { list-style:none;}
		.SubCategoryBox .attr .ul_list ul li { display:block; float:left;text-align:center; width:120px; line-height:20px;}
		.showmore { clear:both; text-align:center;padding-top:10px;}
		.showmore a { display:block; width:250px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
		.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
		.onttop{float: right;padding-top: 5px;width:10px;height:10px;background-color: red;}
		.togglebackground{background-color: #ABCDEF;}
</style>

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 = $("<b name='" + i + "'></b>").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怎么实现更多选项的功能-创新互联
文章地址：https://www.cdcxhl.com/article48/dspihp.html

成都网站建设公司_创新互联，为您提供网站策划、微信公众号、网站导航、网站营销、搜索引擎优化、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

绵阳服务器托管

网页设计公司知识

同城分类信息