jQuery模拟12306城市选择框功能简单实现方法示例

本文实例讲述了框架模拟12306城市选择框功能简单实现方法。分享给大家供大家参考，具体如下：

！DOCTYPE htmlhtml标题titlewww.jb51.net jQuery城市选择框/title style # parent { width :500 px；位置：相对；} # text { height:25px} #选择{ width :420 pxh three :185 px位置：绝对；top:31pxleft:0背景技术# eeeeee}。城市{ width :60 pxh three :25 px线高：25 px余量：5 px 5px 0 5pxfloat 3360 left文本对齐：居中；字体系列：《新罗马时代》；font-size :15 px光标：指针指针；}/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $('#select ')).hide()；$('#text ').focus(function(){ $('#select ')).show()；});$('.城市")。单击(函数(){ $('#text ')).瓦尔($(这个).text())；$('#select ').hide()；});$('#text ').blur(function(){ setTimeout(function(){ $(' # select '))).hide()；}, 300);});});/script /head body div id='parent '输入类型=' text ' id=' text ' div id=' select ' div class=' city '乌鲁木齐div class=' city '兰州div class=' city '西宁div class=' city '拉萨div class=' city '呼和浩特div class=' city '哈尔滨div class=' city '长春div class=' city '沈阳div class=' city '三亚div class=' city '北京/div 类='城市'天津div class=' city '太原div class=' city '济南div class=' city '银川div class=' city '西安div class=' city '郑州div class=' city '南京div class=' city '杭州div class=' city '福州div class=' city '广州div class=' city '台北div class=' city '南宁div class=' city '昆明/div div class=' “城市”成都div class=' city '重庆div class=' city '贵阳div class=' city '长沙div class=' city '南昌div class=' city '合肥div class=' city '武汉div class=' city '上海div class=' city '海口div class=' city '香港div class=' city '澳门/div /div /div /body/html运行效果如下：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试一下运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。