js模拟select下拉菜单控件的代码


Posted in Javascript onMay 08, 2013
<!DOCTYPE html>
 <html>
 <head>
 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <meta charset=utf-8 />
 <title>js模拟select</title>
 </head>
    <style>
   *{ margin:0; padding:0;}
   li{ list-style:none;}
   body{ font:12px "宋体"; color:#666;}
   .select_down{ margin:100px auto; position:relative; width:600px; min-height:200px; height:auto!important; height:200px; border:1px solid #ccc; padding:20px; border-radius: 8px}
   .select_down dt{float:left;width:134px;position:relative;margin-right:5px;display:inline;}
   .select_down h3{color: #919191; font-size:12px;font-weight: normal;border:1px solid #e5e5e5;height:18px;background:#fbfbfb;line-height: 18px;text-indent:8px;}
   .select_down ul{width: 132px;border: 1px solid #e5e5e5;background:#fbfbfb;position: absolute;top: 18px;left: 0;
 z-index: 1;text-indent:8px;display:none;}
 .select_down ul li{height:22px;line-height: 22px;cursor:pointer;}
 .select_down ul li.hover{background:#f2f2f2;}
  .select_down dt a{background:url('https://3water.com/hxh-hua/478335/o_select.jpg') no-repeat;position:absolute;width:18px;height:18px;top:1px;right:1px; }
   </style>
 <body>
   <div class="select_down" id="sel">
           <dl>
             <dt>
                 <h3>select选择</h3>
                 <a href="javascript:;"></a>
                 <ul>
                     <li>jq的select模拟1</li>
                     <li>jq的select模拟2</li>
                     <li>jq的select模拟3</li>
                 </ul>
             </dt>
             <dt>
                 <h3>select选择2</h3>
                 <a href="javascript:;"></a>
                 <ul>
                     <li>jq的select模拟11</li>
                     <li>jq的select模拟22</li>
                     <li>jq的select模拟31</li>
                 </ul>
             </dt>         </dl>
 </div>
   <script>
     window.onload=function(){
     var oflink = document.getElementById('sel');
     var aDt = oflink.getElementsByTagName('dt');
     var aUl = oflink.getElementsByTagName('ul');
     var aH3= oflink.getElementsByTagName('h3');
     for(var i=0;i<aDt.length;i++){
         aDt[i].index = i;
         aDt[i].onclick = function(ev){
             var ev = ev || window.event;
             var This = this;
             for(var i=0;i<aUl.length;i++){
                 aUl[i].style.display = 'none';
             }
             aUl[this.index].style.display = 'block';
             document.onclick = function(){
                 aUl[This.index].style.display = 'none';
             };
             ev.cancelBubble = true;
         };
     }
     for(var i=0;i<aUl.length;i++){
         aUl[i].index = i;
         (function(ul){
             var iLi = ul.getElementsByTagName('li');
             for(var i=0;i<iLi.length;i++){
                 iLi[i].onmouseover = function(){
                     this.className = 'hover';
                 };
                 iLi[i].onmouseout = function(){
                     this.className = '';
                 };
                 iLi[i].onclick = function(ev){
                     var ev = ev || window.event;
                     aH3[this.parentNode.index].innerHTML = this.innerHTML;
                     ev.cancelBubble = true;
                     this.parentNode.style.display = 'none';
                 };
             }
         })(aUl[i]);
     }
 }
   </script>
 </body>
 </html>
Javascript 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
vue界面发送表情的实现代码
Sep 11 Javascript
js工具方法弹出蒙版
May 08 #Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 #Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 #Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 #Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 #Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 #Javascript
JS中的substring和substr函数的区别说明
May 07 #Javascript
You might like
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
js a标签点击事件
2017/03/30 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
python列表的增删改查实例代码
2018/01/30 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
工程师岗位职责
2013/11/08 职场文书
物业门卫岗位职责
2013/12/28 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
企业文化建设实施方案
2014/03/22 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
管理失职检讨书范文
2015/05/05 职场文书
自我检讨书怎么写
2015/05/07 职场文书
导游词之河北野三坡
2019/12/11 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL