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

网络编程 2024/9/24 佚名

3 1 2

复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js"> <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://www.jb51.net/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>

模拟,select

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js模拟select下拉菜单控件的代码”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

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

jQuery ui插件的使用方法代码实例

js工具方法弹出蒙版

评论“js模拟select下拉菜单控件的代码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接