您的位置：首页 > Web前端 > JQuery

jquery实现上下箭头下拉框

2014-11-24 13:27 405 查看 
<html>
<head></head>
<body>
<form class="select">
<input type="text" value="3" id="am" class="am" readonly="" />
<div class="icon">
<div class="up"></div>
<div class="down"></div>
</div>
<div id="HMF-1" style="display: none " class="bm">
<span class="cur">3</span>
<span class="cur">2</span>
<span class="cur">1</span>
</div>
</form>
</body>
</html>


　　css:

.select {
min-width: 34px;
position: relative;
margin-top:2px;
display: inline-block;
display: -webkit-inline-box;
border: 1px #999999 solid;
}

.cur {
cursor: pointer;
display: block;
background:#fff;
color:  #fd7602;
height: 22px;
line-height: 22px;
padding-left:10px;
}

.cur:hover {
background: #878787;
color: #fff;
}

.am {
border: 0px;
color: #fd7602;
cursor: pointer;
width: 34px;
height: 19px;
padding-left: 10px;
}

.bm {
position: absolute;
border: 1px #999999 solid;
width: 42px;
margin-top: -21px;
padding-top: 21px;
}

.icon {
position: absolute;
top: 0;
right: 0;
height: 19px;
padding: 3px;
}

.icon div {
width: 7px;
height: 3px;
cursor: pointer;
}

.icon .up {
margin-top:2px;
background:url(img/pop/jian.png) top center no-repeat;
}

.icon .down {
margin-top:3px;
background:url(img/pop/jian.png) bottom center no-repeat;
}


js:

function selectFn(){
var select_index=0;
var _span=$('span.cur');
var _am=$('#am');
var _select_div=$('#HMF-1');

$('span.cur').click(function(){
select_index=$(this).index();
_am.val($(this).html());
_select_div.css('display','none');
$('form.select').css('border','1px #999999 solid');
});
_am.click(function(){
if(_select_div.css('display') =='none'){
_select_div.css('display','block');
$('form.select').css('border','none');
}
else{
_select_div.css('display','none');
$('form.select').css('border','1px #999999 solid');
}
});
$('div.up').click(function(){
select_index = select_index >0 ? (select_index-1) : 0;
_am.val(_span.eq(select_index).html());
});
$('div.down').click(function(){
select_index = select_index <_span.length-1 ? (select_index+1) : select_index;
_am.val(_span.eq(select_index).html());
});
}



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航