jQuery模拟select实现下拉菜单功能
网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要介绍了jQuery模拟select实现下拉菜单功能,比较实用,需要的朋友可以参考下。
用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。
JS代码
/
模拟搜索下拉select
默认调用方式$(el).setSelect({
optionList: [], //这里是下拉的选项，如['aa','bb']
hiddenInput: '#optionHidden', //隐藏的input获取选中后的值，供表单提交时传值
getOption: '#sOptionBtn',
callback: function(option){}
})
/
(function ($) {
$.fn.setSelect = function(options){
var opt = $.extend({
optionList: [],
getOption: '',
hiddenInput: '',
callback: function(){}
}, options || {});
return this.each(function(){
opt._id = this;
var _time;
var arrow = $(this).find('i');
$(opt._id).append('<ul id="selectList"></ul>');
for(var i=0;i<opt.optionList.length;i++){
$("#selectList").append('<li>'+opt.optionList[i]+'</li>')
};
$(opt._id).bind({
mouseenter: function(){
$(arrow).addClass('arrow-hover');
$('#selectList').slideDown();
clearTimeout(_time);
},
mouseleave: function(){
_time=setTimeout(function(){
$(arrow).removeClass('arrow-hover');
$('#selectList').slideUp()
},300);
}
});
//获取选择的值
$('#selectList').delegate('li','click',function(){
var option = $(this).text();
$(opt.getOption).text(option);
$(opt.hiddenInput).val(option);
$('#selectList').slideUp();
return opt.callback(option);
});
});
}
})(jQuery);
demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果)
截个图
代码
<!doctype html>
<htm>
<head>
<meta http-equiv="Content-type" content="text/html charset=utf-8">
<title></title>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0
}
body, button, input, select, textarea {
font: 12px Arial, Helvetica, sans-serif
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%
}
code, kbd, pre, samp {
font-family: courier new, courier, monospace
}
small {
font-size: 12px
}
ul, ol {
list-style: none
}
a {
text-decoration: none;
color: #333
}
a:hover {
text-decoration: underline
}
sup {
vertical-align: text-
}
sub {
vertical-align: text-bottom
}
legend {
color: #000
}
fieldset, img {
border: 0
}
button, input, select, textarea {
font-size: 100%
}
button {
border: 0 none;
cursor: pointer
}
table {
border-collapse: collapse;
border-spacing: 0
}
em {
font-style: normal
}
address {
font-style: normal
}
textarea {
resize: vertical
}
html {
zoom:expression(function(ele) {
ele.style.zoom = "1";
document.execCommand("BackgroundImageCache", false, true)
}
(this))
}/解决IE下express重复执行的问题/
article, aside, audio, canvas, mand, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, menu, mark, output, progress, section, source, video, address {
display: block
}/html5标签向下兼容/
.clearfix:after {
content: '\20';
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix {
zoom:1
}
.arrow-dn {
display: inline-block;
height: 0;
width: 0;
font-size: 0;
overflow: hidden;
border: 3px solid #505050;
border-color: #505050 transparent transparent;
_border-style: solid dotted dotted dotted
}
.-search {
width: 497px;
height: 30px;
_height: 33px;
background: url(../images/bg.png) left no-repeat;
_padding-bottom: 0;
margin-: 20px;
border: 3px solid #cd0001;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
position: relative;
z-index: 9;
margin: 50px auto
}
.-search input {
width: 350px;
float: left;
padding: 7px 0;
_padding: 6px 0;
border: none 0;
background: 0;
color: #666;
font-size: 14px
}
.-search input:focus, .area-search .search-intri input:focus {
outline: 0
}
.-search button {
width: 77px;
height: 30px;
line-height: 30px;
font-weight: bold;
font-size: 14px;
text-align: center;
background: #f4ac1f;
float: right
}
.-search .select {
float: left;
font-size: 14px;
width: 55px;
padding-: 5px;
margin-right: 5px;
position: relative;
z-index: 3
}
.-search .select ul {
position: absolute;
left: -3px;
: 30px;
width: 55px;
background: #fff;
border: 3px solid #cd0001;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-: 0;
line-height: 1.8;
display: none
}
.-search .select ul li {
cursor: pointer;
padding: 2px 0;
padding-left: 10px
}
.-search .select ul li:hover {
background: #f3f3f3
}
.-search .select .s-option {
display: inline-block;
position: absolute;
: 0;
height: 32px;
line-height: 28px;
width: 45px;
padding-left: 8px
}
.-search .select a:hover {
text-decoration: none
}
.-search .select .arrow-dn {
border-width: 4px;
border-color: #939393 transparent transparent;
position: absolute;
right: 7px;
: 11px;
-webkit-transition: -webkit-transform .2s ease-in-out;
-webkit-transform: translate3d(0, 0, 999px);
-webkit-backface-visibility: visible;
-moz-transition: -moz-transform .2s ease-in-out;
-moz-transform: translate3d(0, 0, 999px);
-moz-backface-visibility: visible;
}
.-search .select .arrow-hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: translated3d(0, 0, 999px);
border-color: transparent transparent #939393\9;
: 10px;
: 7px\9;
_: 11px
}
</style>
</head>
<body>
<form class="-search clearfix">
<!--隐藏的input获取option值-->
<input type="hidden" id="optionHidden" value="机构">
<div class="select">
<a id="sOptionBtn" class="s-option" href="javascript:void(0)">机构</a>
<i class="arrow-dn"></i>
</div>
<input type="text" id="kw">
<button type="submit">搜索</button>
</form>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('.-search .select').setSelect({
optionList: ['机构','课程'],
hiddenInput: '#optionHidden',
getOption: '#sOptionBtn',
callback: function(option){}
});
});
(function ($) {
$.fn.setSelect = function(options){
var opt = $.extend({
optionList: [],
getOption: '',
hiddenInput: '',
callback: function(){}
}, options || {});
return this.each(function(){
opt._id = this;
var _time;
var arrow = $(this).find('i');
$(opt._id).append('<ul id="selectList"></ul>');
for(var i=0;i<opt.optionList.length;i++){
$("#selectList").append('<li>'+opt.optionList[i]+'</li>')
};
$(opt._id).bind({
mouseenter: function(){
$(arrow).addClass('arrow-hover');
$('#selectList').slideDown();
clearTimeout(_time);
},
mouseleave: function(){
_time=setTimeout(function(){
$(arrow).removeClass('arrow-hover');
$('#selectList').slideUp()
},300);
}
});
//获取选择的值
$('#selectList').delegate('li','click',function(){
var option = $(this).text();
$(opt.getOption).text(option);
$(opt.hiddenInput).val(option);
$('#selectList').slideUp();
return opt.callback(option);
});
});
}
})(jQuery);
</script>
</body>
</html>
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程