HTML5移动端分类筛选菜单代码

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

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

以下是 HTML5移动端分类筛选菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML5移动端分类筛选菜单代码</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>
<div style="height:200px;"></div>
<!-- screening -->
<div class="screening">
    <ul>
        <li class="Regional"><span>工作城市</span></li>
        <li class="Sort"><span>企业性质</span></li>
        <li class="Brand"><span>专     业</span></li>
        <li class="meishi"><span>更     多</span></li>
    </ul>
</div>
<!-- End screening -->

<!--工作城市-->
<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">
    	<div class="zimu">A</div>
        <li onclick="gradet(this)">全河北  </li>
        <div class="zimu">B</div>
        <li onclick="gradet(this)">石家庄  </li>
        <li onclick="gradet(this)">唐山  </li>
        <li onclick="gradet(this)">秦皇岛  </li>
        <div class="zimu">C</div>
        <li onclick="gradet(this)">邢台  </li>
        <li onclick="gradet(this)">保定  </li>
        <li onclick="gradet(this)">张家口  </li>
        <div class="zimu">D</div>
        <li onclick="gradet(this)">承德  </li>
        <li onclick="gradet(this)">沧州  </li>
        <div class="zimu">E</div>
        <li onclick="gradet(this)">廊坊  </li>
        <li onclick="gradet(this)">衡水  </li>
    </ul>
</div>
<!-- End 工作城市 -->

<!-- 企业性质-->
<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>
    </ul>
</div>

<!--专业-->
<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>
    </ul>
</div>
<!-- End 专业 -->

<!-- 更多 -->
<div class="meishi22">
    <ul class="meishia-w" id="meishia">
        <li onclick="meishia(this)">行     业</li>
        <li onclick="meishia(this)">热门招聘</li>
    </ul>
    <ul class="meishia-t" id="meishib">
        <li onclick="meishib(this)"><a href="#">地质学</a> </li>
        <li onclick="meishib(this)"><a href="#">临床医学  </a></li>
        <li onclick="meishib(this)"><a href="#">工商管理</a> </li>
        <li onclick="meishib(this)"><a href="#">生物学 </a></li>
        <li onclick="meishib(this)"><a href="#">材料科学与工程 </a></li>
    </ul>
</div>
</body>
</html>

JS代码(demo.js):

//meishi开始$(document).ready(function(){
	$(".meishi").click(function(){
	if ($('.meishi22').hasClass('grade-w-roll')){
	$('.meishi22').removeClass('grade-w-roll');
	$(this).removeClass('current');
	$('.screening').attr('style',' ');
}
else{
	$('.meishi22').addClass('grade-w-roll');
	$(this).addClass('current');
	$(".Regional").removeClass('current');
	$(".Brand").removeClass('current');
	$(".Sort").removeClass('current');
	$('.screening').attr('style','position:fixed;
	top:0;
	');
}
}
);
}
);
	$(document).ready(function(){
	$(".meishia-w>li").click(function(){
	$(".meishia-t") .css("left","50%")}
);
}
);
	$(document).ready(function(){
	$(".meishia-t>li").click(function(){
	$(".meishia-s") .css("left","50%")}
);
}
);
	//Regional开始$(document).ready(function(){
	$(".Regional").click(function(){
	if ($('.grade-eject').hasClass('grade-w-roll')){
	$('.grade-eject').removeClass('grade-w-roll');
	$(this).removeClass('current');
	$('.screening').attr('style',' ');
}
else{
	$('.grade-eject').addClass('grade-w-roll');
	$(this).addClass('current');
	$(".meishi").removeClass('current');
	$(".Brand").removeClass('current');
	$(".Sort").removeClass('current');
	$('.screening').attr('style','position:fixed;
	top:0;
	');
}
}
);
}
);
	$(document).ready(function(){
	$(".grade-w>li").click(function(){
	$(".grade-t") .css("left","50%")}
);
}
);
	$(document).ready(function(){
	$(".grade-t>li").click(function(){
	$(".grade-s") .css("left","50%")}
);
}
);
	//Brand开始$(document).ready(function(){
	$(".Brand").click(function(){
	if ($('.Category-eject').hasClass('grade-w-roll')){
	$('.Category-eject').removeClass('grade-w-roll');
	$(this).removeClass('current');
	$('.screening').attr('style',' ');
}
else{
	$('.Category-eject').addClass('grade-w-roll');
	$(this).addClass('current');
	$(".meishi").removeClass('current');
	$(".Regional").removeClass('current');
	$(".Sort").removeClass('current');
	$('.screening').attr('style','position:fixed;
	top:0;
	');
}
}
);
}
);
	//Sort开始$(document).ready(function(){
	$(".Sort").click(function(){
	if ($('.Sort-eject').hasClass('grade-w-roll')){
	$('.Sort-eject').removeClass('grade-w-roll');
	$(this).removeClass('current');
	$('.screening').attr('style',' ');
}
else{
	$('.Sort-eject').addClass('grade-w-roll');
	$(this).addClass('current');
	$(".meishi").removeClass('current');
	$(".Regional").removeClass('current');
	$(".Brand").removeClass('current');
	$('.screening').attr('style','position:fixed;
	top:0;
	');
}
}
);
}
);
	//判断页面是否有弹出$(document).ready(function(){
	$(".meishi").click(function(){
	if ($('.Category-eject').hasClass('grade-w-roll')){
	$('.Category-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".meishi").click(function(){
	if ($('.Sort-eject').hasClass('grade-w-roll')){
	$('.Sort-eject').removeClass('grade-w-roll');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".meishi").click(function(){
	if ($('.grade-eject').hasClass('grade-w-roll')){
	$('.grade-eject').removeClass('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(){
	$(".Regional").click(function(){
	if ($('.meishi22').hasClass('grade-w-roll')){
	$('.meishi22').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(){
	$(".Brand").click(function(){
	if ($('.meishi22').hasClass('grade-w-roll')){
	$('.meishi22').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');
}
;
}
);
}
);
	$(document).ready(function(){
	$(".Sort").click(function(){
	if ($('.meishi22').hasClass('grade-w-roll')){
	$('.meishi22').removeClass('grade-w-roll');
}
;
}
);
}
);
	//js点击事件监听开始function meishia(wbj){
	var arr = document.getElementById("meishia").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.background = "";
}
;
	wbj.style.background = "#eee"}
function meishib(tbj){
	var arr = document.getElementById("meishib").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.background = "";
}
;
}
function meishis(sbj){
	var arr = document.getElementById("meishis").getElementsByTagName("li");
	for (var i = 0;
	i < arr.length;
	i++){
	var a = arr[i];
	a.style.borderBottom = "";
}
;
	sbj.style.borderBottom = "solid 1px #ff7c08"}
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 = "";
}
;
}
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 = "";
}
;
}
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.background = "";
}
;
	sbj.style.background = "#eee"}

CSS代码(demo.css):

/* screening */
*{box-sizing:border-box;padding:0px;margin:0px;}
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;font-size:0.75em;width:25%;text-align:center;line-height:3rem;border-left:solid 1px #d3d3d3;}
div.screening>ul>li>span{background:url("../images/on_1.png") no-repeat right center;background-size:0.75em;padding-right:15px;}
div.screening>ul>.current>span{background:url("../images/on_2.png") no-repeat right center;background-size:0.75em;color:#3cb9f3;}
/* grade */
.meishi22,.grade-eject,.Category-eject,.Sort-eject{position:fixed;top:-65%;width:100%;height:63%;z-index:1;-webkit-transition-duration:0.4s;}
.meishi22>ul,.grade-eject>ul,.Category-eject>ul,.Sort-eject>ul{margin:0;padding:0;overflow:auto;height:100%;width:100%;-webkit-transition-duration:0.4s;}
.meishi22>ul>li,.grade-eject>ul>li,.Category-eject>ul>li,.Sort-eject>ul>li{height:3rem;line-height:3rem;font-size:0.75em;padding-left:1rem;border-bottom:solid 1px #eee;}
.meishi22>ul.meishia-w,.grade-eject>ul.grade-w,.Category-eject>ul.Category-w{background:#fff;position:absolute;z-index:1;}
.meishi22>ul.meishia-t,.grade-eject>ul.grade-t,.Category-eject>ul.Category-t{background:#eee;position:absolute;z-index:2;left:100%;}
.meishi22>ul.meishia-t>li,.grade-eject>ul.grade-t>li,.Category-eject>ul.Category-t>li{border-bottom:solid 1px #e5e5e5;}
.meishi22>ul.meishia-s,.grade-eject>ul.grade-s,.Category-eject>ul.Category-s{background:#fff;position:absolute;z-index:3;left:100%;list-style-type:none;}
.meishi22>ul.meishia-s>li,.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:63%;}
/* demo-content */
.demo-content{padding-top:3rem;}
/*.meishi1{background:url(../images/meishi1.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
.meishi2{background:url(../images/meishi2.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
.meishi3{background:url(../images/meishi3.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
.meishi4{background:url(../images/meishi4.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
.meishi5{background:url(../images/meishi5.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
.meishi6{background:url(../images/meishi6.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
.meishi7{background:url(../images/meishi7.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
.meishi8{background:url(../images/meishi8.png) no-repeat left;background-size:25px;height:3rem;padding-left:2rem;width:10rem;}
*/
.xiaobiao{background-color:#d2d3ce;color:#FFFFFF;padding:0px 5px;font-size:10px;border-radius:8px;margin-left:10px;}
.xiaobiao1{font-size:10px;margin-left:20px;}
.zimu{height:20px;background-color:#e4e4e4;border-bottom:1px solid #e5e5e5;padding-left:20px;line-height:20px;}
.wrap{position:relative;margin-top:-60px;}
.slider-v3{margin:1.5em auto;}
.wrap input{position:absolute;left:-9999px;}
.slider-v3{position:relative;display:block;width:5em;height:2em;cursor:pointer;border-radius:1.5em;transition:350ms;background:#ddd;}
.slider-v3::after{position:absolute;content:'';width:1.5em;height:1.5em;top:0.2em;left:0.5em;border-radius:1.5em;transition:width 200ms ease-out,height 300ms 50ms ease-in,top 300ms 50ms ease-in,left 250ms 50ms ease-in,box-shadow 300ms ease-in;background:#e23a46;box-shadow:0 0 0 1.5em #f2f2f2 inset;}
input:checked + .slider-v3::after{top:0.2em;left:3em;box-shadow:0 0 0 0 #f2f2f2 inset;}
.choose a{color:#666666;text-decoration:none;}
.choose a:hover{color:#990000;text-decoration:none;}
.choose{padding:13px 30px 30px 0;}
.choosetext{height:24px;padding:20px 0;font-size:14px;}
.choosebox{padding:0 0 35px 0;}
.choosebox li{float:left;margin-right:10px;display:inline;padding-bottom:22px;}
.choosebox li a{float:left;background:#fff;font-size:14px;border:1px solid #ccc;height:14px;line-height:14px;padding:4px 12px;display:block;}
.choosebox li a.current{background:#e23a46;color:#FFFFFF;}
.choosebox li input{display:none;}
.choose .btn-img{overflow:hidden;background:#fff;cursor:pointer;border:0;}
.choose .btn-img span{font-size:18px;font-weight:800;color:#e23a46;font-family:"微软雅黑","宋体";}

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