jQuery仿app产品筛选分类导航js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿app产品筛选分类导航js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery仿app产品筛选分类导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none"/>
<meta name="HandheldFriendly" content="true"/>
<link type="text/css" rel="stylesheet" href="css/demo.css">
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/demo.js"></script>
</head>
<body>
<!-- screening -->
<div class="screening">
    <ul>
        <li class="Regional">地域</li>
        <li class="Brand">品牌</li>
        <li class="Sort">类型</li>
    </ul>
</div>
<!-- End screening -->
<!-- grade -->
<div class="grade-eject">
    <ul class="grade-w" id="gradew">
        <li onclick="grade1(this)">哈尔滨</li>
        <li onclick="grade1(this)">全国</li>
        <li onclick="grade1(this)">北京</li>
        <li onclick="grade1(this)">天津</li>
        <li onclick="grade1(this)">河北</li>
        <li onclick="grade1(this)">山西</li>
        <li onclick="grade1(this)">内蒙古</li>
        <li onclick="grade1(this)">辽宁</li>
        <li onclick="grade1(this)">吉林</li>
        <li onclick="grade1(this)">黑龙江</li>
        <li onclick="grade1(this)">上海</li>
        <li onclick="grade1(this)">江苏</li>
        <li onclick="grade1(this)">山东</li>
        <li onclick="grade1(this)">河南</li>
        <li onclick="grade1(this)">湖北</li>
        <li onclick="grade1(this)">湖南</li>
        <li onclick="grade1(this)">广东</li>
        <li onclick="grade1(this)">广西</li>
        <li onclick="grade1(this)">海南</li>
    </ul>
    <ul class="grade-t" id="gradet">
        <li onclick="gradet(this)">全河北</li>
        <li onclick="gradet(this)">石家庄</li>
        <li onclick="gradet(this)">唐山</li>
        <li onclick="gradet(this)">秦皇岛</li>
        <li onclick="gradet(this)">邢台</li>
        <li onclick="gradet(this)">保定</li>
        <li onclick="gradet(this)">张家口</li>
        <li onclick="gradet(this)">承德</li>
        <li onclick="gradet(this)">沧州</li>
        <li onclick="gradet(this)">廊坊</li>
        <li onclick="gradet(this)">衡水</li>
    </ul>
    <ul class="grade-s" id="grades">
        <li onclick="grades(this)">全秦皇岛</li>
        <li onclick="grades(this)">海港区</li>
        <li onclick="grades(this)">山海关区</li>
        <li onclick="grades(this)">北戴河区</li>
        <li onclick="grades(this)">青龙满族自治区</li>
        <li onclick="grades(this)">昌黎县</li>
        <li onclick="grades(this)">抚宁县</li>
        <li onclick="grades(this)">卢龙县</li>
        <li onclick="grades(this)">其他区</li>
        <li onclick="grades(this)">经济技术开发区</li>
    </ul>
</div>
<!-- End grade -->
<!-- Category -->
<div class="Category-eject">
    <ul class="Category-w" id="Categorytw">
        <li onclick="Categorytw(this)">全部品牌</li>
        <li onclick="Categorytw(this)">奥迪</li>
        <li onclick="Categorytw(this)">丰田</li>
        <li onclick="Categorytw(this)">本田</li>
        <li onclick="Categorytw(this)">大众</li>
        <li onclick="Categorytw(this)">别克</li>
        <li onclick="Categorytw(this)">标志</li>
        <li onclick="Categorytw(this)">东风悦达起亚</li>
        <li onclick="Categorytw(this)">东风</li>
        <li onclick="Categorytw(this)">奔驰</li>
        <li onclick="Categorytw(this)">玛莎拉蒂</li>
        <li onclick="Categorytw(this)">保时捷</li>
        <li onclick="Categorytw(this)">广汽传祺</li>
    </ul>
    <ul class="Category-t" id="Categoryt">
        <li onclick="Categoryt(this)">奥迪A6</li>
        <li onclick="Categoryt(this)">奥迪A6L</li>
        <li onclick="Categoryt(this)">奥迪A4</li>
        <li onclick="Categoryt(this)">奥迪A4L</li>
        <li onclick="Categoryt(this)">奥迪A5</li>
        <li onclick="Categoryt(this)">奥迪A8</li>
        <li onclick="Categoryt(this)">奥迪A8L</li>
        <li onclick="Categoryt(this)">奥迪A3</li>
        <li onclick="Categoryt(this)">奥迪Q5</li>
        <li onclick="Categoryt(this)">奥迪Q7</li>
        <li onclick="Categoryt(this)">奥迪TT</li>
        <li onclick="Categoryt(this)">奥迪R8</li>
    </ul>
    <ul class="Category-s" id="Categorys">
        <li onclick="Categorys(this)">发动机(/进排气系统/燃油系统/冷却系统等)</li>
        <li onclick="Categorys(this)">变速箱</li>
        <li onclick="Categorys(this)">离合器</li>
        <li onclick="Categorys(this)">转向</li>
        <li onclick="Categorys(this)">制动</li>
        <li onclick="Categorys(this)">传动/前后桥</li>
        <li onclick="Categorys(this)">悬挂/车架/车厢</li>
        <li onclick="Categorys(this)">轮胎/钢圈/轮毂</li>
        <li onclick="Categorys(this)">暖风/柴暖/空调系统</li>
        <li onclick="Categorys(this)">汽车电器/电子/传感器</li>
        <li onclick="Categorys(this)">汽车电脑/电子控制单元系统</li>
        <li onclick="Categorys(this)">汽车光电/汽车影音/电子防盗系统</li>
        <li onclick="Categorys(this)">驾驶室/装饰件</li>
        <li onclick="Categorys(this)">轴承/密封件/橡胶件/标准件</li>
        <li onclick="Categorys(this)">汽车润滑/油/脂/液/汽车用品</li>
        <li onclick="Categorys(this)">汽保工具/设备工具/维修设备</li>
        <li onclick="Categorys(this)">液压件/齿轮齿件/挂车/工程机专用件</li>
        <li onclick="Categorys(this)">其他</li>
    </ul>
</div>
<!-- End Category -->
<!-- Category -->
<div class="Sort-eject Sort-height">
    <ul class="Sort-Sort" id="Sort-Sort">
        <li onclick="Sorts(this)">智能排序</li>
        <li onclick="Sorts(this)">离我最近</li>
        <li onclick="Sorts(this)">好评优先</li>
        <li onclick="Sorts(this)">最新发布</li>
        <li onclick="Sorts(this)">人气优先</li>
        <li onclick="Sorts(this)">价格最低</li>
        <li onclick="Sorts(this)">价格最高</li>
    </ul>
</div>
<!-- End Category -->
<!-- demo-content -->
<div class="demo-content">Content</div>
</body>
</html>

JS代码(demo.js):

// ----------------------------------------------//// //// 唐明明☀20150724 //// //// ----------------------------------------------////Regional开始$(document).ready(function(){
	$(".Regional").click(function(){
	if ($('.grade-eject').hasClass('grade-w-roll')){
	$('.grade-eject').removeClass('grade-w-roll');
}
else{
	$('.grade-eject').addClass('grade-w-roll');
}
}
);
}
);
	$(document).ready(function(){
	$(".grade-w>li").click(function(){
	$(".grade-t") .css("left","33.48%")}
);
}
);
	$(document).ready(function(){
	$(".grade-t>li").click(function(){
	$(".grade-s") .css("left","66.96%")}
);
}
);
	//Brand开始$(document).ready(function(){
	$(".Brand").click(function(){
	if ($('.Category-eject').hasClass('grade-w-roll')){
	$('.Category-eject').removeClass('grade-w-roll');
}
else{
	$('.Category-eject').addClass('grade-w-roll');
}
}
);
}
);
	$(document).ready(function(){
	$(".Category-w>li").click(function(){
	$(".Category-t") .css("left","33.48%")}
);
}
);
	$(document).ready(function(){
	$(".Category-t>li").click(function(){
	$(".Category-s") .css("left","66.96%")}
);
}
);
	//Sort开始$(document).ready(function(){
	$(".Sort").click(function(){
	if ($('.Sort-eject').hasClass('grade-w-roll')){
	$('.Sort-eject').removeClass('grade-w-roll');
}
else{
	$('.Sort-eject').addClass('grade-w-roll');
}
}
);
}
);
	//判断页面是否有弹出$(document).ready(function(){
	$(".Regional").click(function(){
	if ($('.Category-eject').hasClass('grade-w-roll')){
	$('.Category-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".Regional").click(function(){
	if ($('.Sort-eject').hasClass('grade-w-roll')){
	$('.Sort-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".Brand").click(function(){
	if ($('.Sort-eject').hasClass('grade-w-roll')){
	$('.Sort-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".Brand").click(function(){
	if ($('.grade-eject').hasClass('grade-w-roll')){
	$('.grade-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".Sort").click(function(){
	if ($('.Category-eject').hasClass('grade-w-roll')){
	$('.Category-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".Sort").click(function(){
	if ($('.grade-eject').hasClass('grade-w-roll')){
	$('.grade-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	//js点击事件监听开始function grade1(wbj){
	var arr = document.getElementById("gradew").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.background = "";
}
;
	wbj.style.background = "#eee"}
function gradet(tbj){
	var arr = document.getElementById("gradet").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.background = "";
}
;
	tbj.style.background = "#fff"}
function grades(sbj){
	var arr = document.getElementById("grades").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.borderBottom = "";
}
;
	sbj.style.borderBottom = "solid 1px #ff7c08"}
function Categorytw(wbj){
	var arr = document.getElementById("Categorytw").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.background = "";
}
;
	wbj.style.background = "#eee"}
function Categoryt(tbj){
	var arr = document.getElementById("Categoryt").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.background = "";
}
;
	tbj.style.background = "#fff"}
function Categorys(sbj){
	var arr = document.getElementById("Categorys").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.borderBottom = "";
}
;
	sbj.style.borderBottom = "solid 1px #ff7c08"}
function Sorts(sbj){
	var arr = document.getElementById("Sort-Sort").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.borderBottom = "";
}
;
	sbj.style.borderBottom = "solid 1px #ff7c08"}

CSS代码(demo.css):

/*----------------------------------------------*/
/* */
/* 唐明明☀20150724 */
/* */
/*----------------------------------------------*/
body{margin:0;padding:0;color:#333;font-size:62.5%;background:#ededed;font-family:Microsoft YaHei;}
/* screening */
div.screening{width:100%;overflow:hidden;background:#fff;position:fixed;z-index:4;}
div.screening>ul{margin:0;padding:0;list-style-type:none;border-bottom:solid 1px #d3d3d3;overflow:hidden;}
div.screening>ul>li{float:left;width:33%;text-align:center;line-height:3rem;border-left:solid 1px #d3d3d3;background:url("../images/on_1.png") no-repeat 85% center;}
/* grade */
.grade-eject,.Category-eject,.Sort-eject{position:fixed;top:-65%;width:100%;height:65%;z-index:1;-webkit-transition-duration:0.4s;}
.grade-eject>ul,.Category-eject>ul,.Sort-eject>ul{margin:0;padding:0;overflow:auto;height:100%;width:100%;-webkit-transition-duration:0.4s;}
.grade-eject>ul>li,.Category-eject>ul>li,.Sort-eject>ul>li{line-height:3rem;font-size:0.12rem;padding-left:1rem;border-bottom:solid 1px #eee;}
.grade-eject>ul.grade-w,.Category-eject>ul.Category-w{background:#ddd;position:absolute;z-index:1;}
.grade-eject>ul.grade-t,.Category-eject>ul.Category-t{background:#eee;position:absolute;z-index:2;left:100%;}
.grade-eject>ul.grade-t>li,.Category-eject>ul.Category-t>li{border-bottom:solid 1px #fff;}
.grade-eject>ul.grade-s,.Category-eject>ul.Category-s{background:#fff;position:absolute;z-index:3;left:100%;list-style-type:none;}
.grade-eject>ul.grade-s>li,.Category-eject>ul.Category-s>li{border-bottom:solid 1px #eee;margin-left:1rem;padding:0;}
.grade-w-roll{top:3rem;}
.grade-w-roll::after{position:fixed;content:"";width:100%;height:100%;display:block;background:rgba(0,0,0,0.2);top:0;}
/*Sort-eject*/
.Sort-Sort{background:#fff;position:absolute;z-index:3;left:0;list-style-type:none;}
.Sort-Sort>li{border-bottom:solid 1px #eee;padding:0;}
.Sort-height{height:343px;}
/* demo-content */
.demo-content{padding-top:3rem;}

附件:下载该文件资源,减少时间成本(增值服务)