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

$(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');
});

猜你喜欢

转载自blog.csdn.net/Neil_1993/article/details/88574732