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