以下是 html5手机端信息筛选条件代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
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>
<!-- screening -->
<div class="screening">
<ul>
<li class="meishi">美食</li>
<li class="Regional">附近</li>
<li class="Sort">排序</li>
<li class="Brand">筛选</li>
</ul>
</div>
<!-- End screening -->
<!-- grade -->
<div class="meishi22">
<ul class="meishia-w" id="meishia">
<li onclick="meishia(this)"><div class="meishi1">全部分类 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi2">美食 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi3">电影 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi4">酒店 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi5">休闲娱乐 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi6">KTV <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi7">丽人 <span class="xiaobiao">1225></span></div></li>
<li onclick="meishia(this)"><div class="meishi8">外卖 <span class="xiaobiao">1225></span></div></li>
</ul>
<ul class="meishia-t" id="meishib">
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
<li onclick="meishib(this)">小天鹅 <span class="xiaobiao1">1225</span></li>
</ul>
</div>
<div class="grade-eject">
<ul class="grade-w" id="gradew">
<li onclick="grade1(this)">哈尔滨 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">全国 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">北京 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">天津 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">河北 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">山西 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">内蒙古 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">辽宁 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">吉林 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">黑龙江 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">上海 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">江苏 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">山东 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">河南 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">湖北 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">湖南 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">广东 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">广西 <span class="xiaobiao">1225></span></li>
<li onclick="grade1(this)">海南 <span class="xiaobiao">1225></span></li>
</ul>
<ul class="grade-t" id="gradet">
<div class="zimu">A</div>
<li onclick="gradet(this)">全河北 <span class="xiaobiao1">1225</span></li>
<div class="zimu">B</div>
<li onclick="gradet(this)">石家庄 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">唐山 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">秦皇岛 <span class="xiaobiao1">1225</span></li>
<div class="zimu">C</div>
<li onclick="gradet(this)">邢台 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">保定 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">张家口 <span class="xiaobiao1">1225</span></li>
<div class="zimu">D</div>
<li onclick="gradet(this)">承德 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">沧州 <span class="xiaobiao1">1225</span></li>
<div class="zimu">E</div>
<li onclick="gradet(this)">廊坊 <span class="xiaobiao1">1225</span></li>
<li onclick="gradet(this)">衡水 <span class="xiaobiao1">1225</span></li>
</ul>
</div>
<!-- End grade -->
<!-- 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>
</ul>
</div>
<!-- End Category -->
<!-- Category -->
<script src="js/truck.23648f77.js"></script>
<div class="Category-eject">
<ul class="Category-w" id="Categorytw">
<li onclick="Categorytw(this)">
优惠买单
<span><div class="wrap">
<input type="checkbox" id="s5">
<label class="slider-v3" for="s5"></label>
</div></span>
</li>
<li onclick="Categorytw(this)">
只看免预约
<span><div class="wrap">
<input type="checkbox" id="s6">
<label class="slider-v3" for="s6"></label>
</div></span>
</li>
<li onclick="Categorytw(this)">
节假日可用
<span><div class="wrap">
<input type="checkbox" id="s7">
<label class="slider-v3" for="s7"></label>
</div></span>
</li>
<li onclick="Categorytw(this)">用餐人数</li>
<li onclick="Categorytw(this)">
<div class="choose" id="dress-size">
<form action="" method="get">
<div class="choosebox">
<ul class="clearfix">
<li>
<input type="radio" name="name" value="S" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">不限</span></a>
</li>
<li>
<input type="radio" name="name" value="M" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">单人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="L" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">双人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">3~4人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">5~10人餐</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">10人以上</span></a>
</li>
<li>
<input type="radio" name="name" value="XXL" id="" />
<a href="javascript:void(0);" class="size_radioToggle"><span class="value">其它</span></a>
</li>
</ul>
</div>
<div style="margin-top:100px;"><button type="submit" class="btn-img"><span>完成</span></button></div>
</form>
</div>
</li>
<li onclick="Categorytw(this)"></li>
<li onclick="Categorytw(this)"></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$('.choosebox li a').click(function(){
var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();
var checkBox = thisToggle.prev();
checkBox.trigger('click');
$('.size_radioToggle').removeClass('current');
thisToggle.addClass('current');
return false;
});
});
$(".choosebox li a").click(function(){
var text = $(this).html();
$(".choosetext span").html(text);
$("#result").html("" + getSelectedValue("dress-size"));
});
function getSelectedValue(id){
return
$("#" + id).find(".choosetext span.value").html();
}
</script>
<!-- End Category -->
<!-- demo-content -->
<div class="demo-content">Content</div>
<!-- End demo-content -->
</body>
</html>JS代码(demo.js):
// ----------------------------------------------//// //// 唐明明☀20150724 //// //// ----------------------------------------------////meishi开始$(document).ready(function(){
$(".meishi").click(function(){
if ($('.meishi22').hasClass('grade-w-roll')){
$('.meishi22').removeClass('grade-w-roll');
}
else{
$('.meishi22').addClass('grade-w-roll');
}
}
);
}
);
$(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');
}
else{
$('.grade-eject').addClass('grade-w-roll');
}
}
);
}
);
$(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');
}
else{
$('.Category-eject').addClass('grade-w-roll');
}
}
);
}
);
//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(){
$(".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 = "";
}
;
}
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):
/*----------------------------------------------*/
/* */
/* 唐明明☀20150724 */
/* */
/*----------------------------------------------*/
body{margin:0;padding:0;color:#333;font-size:16px;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:24%;text-align:center;line-height:3rem;border-left:solid 1px #d3d3d3;background:url("../images/on_1.png") no-repeat 85% center;}
/* 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:16px;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:"微软雅黑","宋体";}
分享到QQ
分享到微博
微信扫一扫
