jq 单个按钮状态切换 以及 二级菜单

本文介绍了如何利用 jQuery(jq)实现单个按钮的状态切换效果,详细讲解了相关 DOM 操作步骤,并探讨了在实际应用中如何结合使用 jq 处理二级菜单的显示与隐藏,为网页交互提升用户体验。
摘要由CSDN通过智能技术生成
$(document).ready(function() {
	var old = null; //用来保存原来的对象

	$("body").click(function() {
		old = this;
		$("#ifjx").addClass('icon-paixu-shengxu');
		$("#ifjx").removeClass('icon-paixu-jiangxu');
		$(".search_choose").addClass('hidden');
	});
	$(".all_btn").click(function(e) {
		e.stopPropagation(); //阻止冒泡到body
	});

	$(".all_btn").each(function() { //循环绑定事件
		if (this.checked) {
			old = this; //如果当前对象选中,保存该对象
		}
		this.onclick = function() {
			if (this == old) { //如果点击的对象原来是选中的,取消选中
				this.checked = false;
				old = null;

				$("#ifjx").addClass('icon-paixu-jiangxu');
				$("#ifjx").removeClass('icon-paixu-shengxu');
				$(".search_choose").removeClass('hidden');

			} else {
				old = this;
				$("#ifjx").addClass('icon-paixu-shengxu');
				$("#ifjx").removeClass('icon-paixu-jiangxu');
				$(".search_choose").addClass('hidden');



			}
		}
	});
});
<span class="all_btn" data-state= 0><span>全部</span> <span id="ifjx" class="iconfont icon-paixu-shengxu"></span></span>

<div class="search_choose hidden">
				<div class="left_choose">
					<div class="left_item_select l_item" data-id="1">年龄</div>
					<div class="left_item l_item" data-id="2">健康</div>
					<div class="left_item l_item" data-id="3">安全</div>
					<div class="left_item l_item" data-id="4">逻辑</div>
				</div>
				<div class="right_choose">
					<div class="right_item_box">
						<span class="right_item">1岁</span>
						<span class="right_item">2岁</span>
						<span class="right_item">3岁</span>
						<span class="right_item">4岁</span>
					</div>
					<div class="right_item_box">
						<span class="right_item">5岁</span>
						<span class="right_item">6岁</span>
						<span class="right_item">7岁</span>
						<span class="right_item">8岁</span>
					</div>
					<div class="right_item_box">
						<span class="right_item">9岁</span>
						<span class="right_item">10岁</span>
						<span class="right_item">9岁</span>
						<span class="right_item">10岁</span>
					</div>
					
				</div>
			</div>
$(document).on('tap', ".l_item", function() {
	var list_id = $(this).attr("id");

	$('.l_item').addClass('left_item');
	$('.l_item').removeClass('left_item_select');

	$(this).removeClass('left_item');
	$(this).addClass('left_item_select');
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值