                        课程
                    
                        /前端开发
                        
                            /WebApp
                        
                        /移动端开发框架Zepto.js入门

城市选择器和sui mobile工具栏组件不能一块用是为什么？谢谢老师

<!doctype html>

<html>

<head>

body{background:#efecec;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);max-width: 600px;margin: 0 auto;}

body,div,dl,dt,dd,ul,li,form,input,button,h1,h2,h3,h4,h5,h6,p{margin: 0 auto;padding:0;font-family:"微软雅黑";}

html{overflow-x:hidden;-webkit-text-size-adjust:none;}

ul,li,dl,dt,dd{display:block;list-style:none;}

img{border:0;max-width:100%;height: auto;}

.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;overflow:hidden;visibility:hidden;width:0;height:0;}

a{text-decoration:none;outline:none;}

.fl{float:left;}

.fr{float:right;}

.none{display:none;}

.loan_jm_l1{float:left;width:150px;}

.btn{width:90px}

.loan_jm1{width:94%;margin:0 auto;}

.loan_jm_spa1{width:39%;height:40px;line-height:40px;font-size:1em;color:#666;display:block;float:left;}

.loan_jm_l1{margin-top:10px;margin-bottom:15px;height:40px;}

.wbk_srn{width:57%;height:40px;border:1px solid #ccc;background:#FFF;float:left;padding-left:3%;line-height:40px;color:#ADADAD;

font-size:1.1em; background-size:45%;background-position:center;background:#fff;}

.wbk_srn b{width:30px;height:40px;border:1px solid #ccc;background:#FFF;float:left;padding-left:3%;line-height:40px;color:#ADADAD;

font-size:1em; background-size:45%;background-position:center;background:url(../img/xl.png) right 5px no-repeat;}

/*城市弹层*/

.container{width:100%;position:absolute;top:56px;left:0;background-color:#ffffff;z-index:9999;display:none;}

.letter{width:5%;overflow:hidden;line-height:32px;font-size:16px;position:fixed;top:20px;right:10px;text-align:center;}

.letter ul{list-style-type:none;}

.letter ul li a{text-decoration:none;}

.city{width:90%;overflow:hidden;padding:20px;}

.city-list{width:100%;overflow:hidden;}

.city-list .city-letter{color:#6e6e6e;font-size:16px;display:inline-block;padding-top:15px;padding-bottom:5px;border-bottom:1px solid #e8ecf1;width:100%;}

.city-list p{color:#afafaf;width:95%;height:50px;line-height:50px;border-bottom:1px solid #e8ecf1;cursor:pointer;}

.UISelect{margin-top:5px}

</style>

</head>

<body>

首页

</a>

我

</a>

收藏

</a>

设置

</a>

</nav>

<ul>

</li>

</ul>

</div>

<div class="city-list">A

鞍山市

阿拉善盟

安庆市

安阳市

阿里地区

安康市

安顺市

阿坝藏族羌族自治州

阿拉尔市

阿克苏地区

澳门特别行政区

阿勒泰地区

</div>

<div class="city-list">B

白城市

包头市

巴彦淖尔市

保定市

本溪市

白山市

亳州市

蚌埠市

滨州市

白银市

宝鸡市

保山市

白沙黎族自治县

百色市

毕节市

北海市

巴中市

保亭黎族苗族自治县

巴音郭楞蒙古自治州

博尔塔拉蒙古自治州

北京市

</div>

<div class="city-list">Z

张家口市

诸暨市

镇江市

张家港市

朝阳市

张家界市

郑州市

枣庄市

舟山市

增城市

珠海市

周口市

淄博市

株洲市

漳州市

驻马店市

湛江市

遵义市

自贡市

昭通市

肇庆市

中山市

张掖市

资阳市

中卫市

</div>

<ul>

</ul>

</div>

//加载城市事件

$('body').on('click', '#zone_ids,#gr_zone_ids', function () {

var zid = $(this).attr('id');

$('.container').show();

});

//选择城市 start

$('body').on('click', '.city-list p', function () {

var type = $('.container').data('type');

$('#zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));

$('#gr_zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));

$('.container').hide();

});

$('body').on('click', '.letter a', function () {

var s = $(this).html();

$(window).scrollTop($('#' + s + '1').offset().top);

});

</script>

$.init();

</script>

</body>

</html>

qq_半颗_03808236

2017-02-06

源自：移动端开发框架Zepto.js入门 4-3

关注问题我要回答

1996

操作

收起

1 回答

i文Vin
2017-03-23

同问一下

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

移动端开发框架Zepto.js入门

参与学习 78536 人
解答问题 54 个

移动端开发必学框架---Zepto.js入门视频教程，学起来吧

进入课程

城市选择器和sui mobile工具栏组件不能一块用是为什么？谢谢老师

我要回答关注问题

热搜

最近搜索清空

城市选择器和sui mobile工具栏组件不能一块用是为什么？谢谢老师

1 回答

城市选择器和sui mobile工具栏组件不能一块用是为什么？谢谢老师