html5仿美團ios手機端信息篩選條件代碼



98 388 130



特效描述:html5仿美團 ios手機端 信息篩選條件,html5仿美團ios手機版信息篩選

代碼結構

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/demo.css">

2. 引入JS

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/truck.23648f77.js"></script>

3. HTML代碼

<!-- 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 -->
<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 -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 收縮菜單 收縮導航 右鍵菜單 滾動導航菜單 滾動菜單 滾動導航 導航切換 菜單切換 滑動導航菜單 滑動導航 滑動菜單 浮動菜單 浮動導航 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動選項卡 滑動切換 滾動切換 滾動條切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 滑動導航菜單 滑動導航 滑動菜單 二級菜單 二級導航菜單 二級導航 下拉框 select下拉菜單 select美化 select美化框 單選框 單選按鈕 切換按鈕 篩選 篩選器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子