menudown手机端下拉搜索

来源:https://www.sucaihuo.com/js/1429.html 2017-03-08 07:01浏览(1694) 收藏

menudown是一款多选项下拉搜索插件,演示demo是参考大众点评的手机wap商圈搜索页面。
menudown手机端下拉搜索
分类:手机特效 > 下拉框 难易:中级
查看演示 下载资源 下载积分: 30 积分
$(function(){
    var v_width= $(document.body).width();
    $(".select_textul").width(v_width);
    
    $(".select_textdiv").click(function(){
    	$(".select_textdiv").removeClass("divfocus");
    	$(this).addClass("divfocus");
    	$(this).siblings(".select_textul").fadeToggle(500);
        var lilength = $(this).siblings(".select_textul").find("li.focus").has(".select_second_ul").length;
    	if(lilength > 0){
    		$(this).siblings(".select_textul").find("li.focus>.select_second_ul").show();
    	}else{
    		$(".select_first_ul>li>p").css("width","100%");
    	}
    })
	$(".select_first_ul>li>p").click(function(){
		$(".select_second_ul").hide();
		$(this).parent("li").addClass("focus").siblings("li").removeClass("focus");
		var ynul = $(this).parent("li").has(".select_second_ul").length;
        if(ynul == 0){
        	
        	var choose = $(this).text();
			$(this).parents(".select_textul").siblings(".select_textdiv").find(".s_text").text(choose);
			$(this).parents(".select_textul").siblings("input").val(choose);
			$(this).parents(".select_textul").fadeOut(300);
        }else{
        	$(".select_second_ul").hide();
		    $(this).siblings(".select_second_ul").show();
		    event.stopPropagation();
			chooseclick();
        }
		
	});
	
	chooseclick();
	function chooseclick(){
		$(".select_second_ul>li").click(function(){
			var choose = $(this).text();
			$(this).addClass("focusli").siblings("li").removeClass("focusli");
			$(this).parents(".select_textul").siblings(".select_textdiv").find(".s_text").text(choose);
			$(this).parents(".select_textul").siblings("input").val(choose);
			$(this).parents(".select_textul").fadeOut(300);
			
			event.stopPropagation();
		});
	}
})
标签: 搜索下拉
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2