首页 > 代码库 > div模拟select下拉菜单效果

div模拟select下拉菜单效果

2024-08-07 04:10:14   219人阅读

有些时候select下拉菜单直接用css调整样式，可能会有兼容性的问题，尤其是右侧的下拉三角，很难用css控制，那怎么办呢？可以采用div模拟select下拉菜单的效果。先直接上代码了：

HTML的结构如下：

<!doctype html><html><head><meta charset="utf-8" /><title>div模拟下拉菜单特效</title><style type="text/css">body,ul,li{ margin:0; padding:0; font-size:13px;}ul,li{list-style:none;}#divselect{width:186px; margin:80px auto; position:relative; z-index:10000;}#divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;padding-left:4px; padding-right:30px; border:3px solid #333333; background:url(xjt.png) no-repeat right center;}#divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}#divselect ul li{height:24px; line-height:24px;}#divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}#divselect ul li a:hover{background-color:#CCC;}p{margin:10px auto; width:920px;}#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}#n a{ padding:0 4px; color:#333}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="divselect.js"></script><script type="text/javascript">$(function(){    divselect("#divselect","#inputselect");});</script></head><body><form action="" method="post"><div id="divselect">      <cite>请选择特效分类</cite>      <ul>         <li><a href="javascript:;" selectid="1">发现</a></li>         <li><a href="javascript:;" selectid="2">优惠</a></li>         <li><a href="javascript:;" selectid="3">海淘</a></li>         <li><a href="javascript:;" selectid="4">晒物</a></li>         <li><a href="javascript:;" selectid="5">经验</a></li>      </ul>  </div>  <input name="" type="hidden" value="" id="inputselect"/></form></body></html>
divselect.js 如下：
divselect = function(divselectid,inputselectid) {    var inputselect = $(inputselectid);    $(divselectid+" cite").click(function(){        var ul = $(divselectid+" ul");        if(ul.css("display")=="none"){            ul.slideDown("fast");        }else{            ul.slideUp("fast");        }    });    $(divselectid+" ul li a").click(function(){        var txt = $(this).text();        $(divselectid+" cite").html(txt);        var value = http://www.mamicode.com/$(this).attr("selectid");        inputselect.val(value);        $(divselectid+" ul").hide();            });    $(document).click(function(){        $(divselectid+" ul").hide();    });};

 

div模拟select下拉菜单效果


联系
我们