js實現(xiàn)下拉菜單效果
更新時間：2017年03月01日 10:33:01 作者：luo8481824
本文主要介紹了js實現(xiàn)下拉菜單效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
width: 460px;
margin: 0 auto;
font-family: "微軟雅黑";
}
.search{
height: 23px;
line-height: 23px;
border-bottom: 1px solid #d4d4d4;
font-weight: 600;
}
.search img{
float: left;
display: inline-block;
margin-top: 5px;
}
.search span{
float: left;
font-size: 14px;
margin-left: 4px;
}
.content1{
height: 254px;
width: 100%;
background: #f5f5f5;
border-top: 1px solid #eaeaea;
padding-top: 10px;
}
.content1 .content1_div{
width: 90%;
height: 43px;
margin: 5px auto;
}
.left{
width: 30%;
height: 43px;
border: 1px solid #eaeaea;
font-size: 14px;
text-align: center;
line-height: 43px;
float: left;
}
.right{
width: 68%;
height:43px;
border: 1px solid #eaeaea;
font-size: 14px;
text-align: center;
line-height: 43px;
float: left;
background: #fff;
margin-left: 3px;
}
.right .right_select{
display: inline-block;
width: 90%;
height: 20px;
border: none;
border: 1px solid #a4bed4;
text-align: center;
direction: center;
}
.right_select option{
text-align: center;
}
.hecha{
text-align: center;
margin-top: 15px;
}
.jdcxx{
height: 146px;
font-size: 14px;
background: #ebebeb;
background-size:cover;
padding-top: 20px;
}
.jdcxx p,.jdcsyrxx p{
margin-left: 20px;
font-weight: 600;
line-height: 33.6px;
font-size: 14px;
}
.jdcxx .xx,.jdcsyrxx .xx{
font-weight: 100;
}
.jdcsyrxx{
margin-top: 20px;
padding-top: 20px;
height: 146px;
font-size: 20px;
background:#ebebeb;
background-size:cover;
}
.hcr,.hcsj{
height: 30px;
font-size: 14px;
line-height: 30px;
border-bottom: 1px solid #d4d4d4;
}
.hcr_left{
display: block;
float: left;
height: 28px;
width: 2px;
margin-top: 1px;
background: #226ed2;
}
.zc{
width: 100px;
display: block;
float: left;
text-align: right;
margin-left: 10px;
margin-right: 10px;
}
.xm,.sj{
font-weight: 600;
}
.xiala_div{
top: 33px;
display: none;
z-index: 600;
border: 1px solid #A4BED4;
width: 253px;
left: 13px;
}
.xiala_input{
line-height: 21px;
width: 253px;
border: none;
outline: none;
margin: 0;
text-align: center;
cursor: default;
background: #fff;
color: #000;
}
.xiala_input:hover{
background: #a4bed4;
}
</style>
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_8q2l5tghvcvm42t9.css
"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<header>
<div class="search">
<img width="" src="img/img_09.png"/>
<span>查詢</span>
</div>
</header>
<div class="content1">
<div class="content1_div">
<div class="left">
號牌種類:
</div>
<div class="right" style="position: relative;">
<input type="text" name="" id="" readonly value="小型汽車號牌" class="right_select"/>
<span style="position: absolute;right: 18px;top: 2px;font-size: 10px; color: #a4bed4;" class="xialaan icon-icon09 iconfont" ></span>
<div class="xiala_div" style="position: absolute;top;line-height: 20px;" >
<input type="text" class="xiala_input" readonly name="" id="" value="小型汽車號牌" />
<input type="text" class="xiala_input" readonly name="" id="" value="大型汽車號牌" />
<input type="text" class="xiala_input" readonly name="" id="" value="中型汽車號牌" />
</div>
</div>
</div>
<div class="content1_div">
<div class="left">
車牌號碼:
</div>
<div class="right" style="position: relative;">
<input type="text" name="" id="" readonly value="魯" class="right_select"/>
<span style="position: absolute;right: 18px;top: 2px;font-size: 10px; color: #a4bed4;" class="xialaan icon-icon09 iconfont" ></span>
<div class="xiala_div" style="position: absolute;top;line-height: 20px;" >
<input type="text" class="xiala_input" readonly name="" id="" value="晉" />
<input type="text" class="xiala_input" readonly name="" id="" value="京" />
<input type="text" class="xiala_input" readonly name="" id="" value="豫" />
</div>
</div>
</div>
<div class="content1_div">
<div class="left">
</div>
<div class="right" style="position: relative;">
<input type="text" name="" id="" value="A" readonly class="right_select"/>
<span style="position: absolute;right: 18px;top: 2px;font-size: 10px; color: #a4bed4;" class="xialaan icon-icon09 iconfont" ></span>
<div class="xiala_div" style="position: absolute;top;line-height: 20px;" >
<input type="text" class="xiala_input" readonly name="" id="" value="A" />
<input type="text" class="xiala_input" readonly name="" id="" value="B" />
<input type="text" class="xiala_input" readonly name="" id="" value="C" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
var xialakuang = $(".xialaan");
var right_select = $(".right_select");
var xiala_div = $(".xiala_div")
for( var i=0;i<xialakuang.length;i++ ){
xialakuang[i].index = i;
var onOff = true;
var This =i;
xialakuang[i].onclick = function(){
if(onOff) {
for( var j=0;j<xiala_div.length;j++ ){
if( this.index == j ){
xiala_div[j].style.display = 'block';
var xiala_input = xiala_div[j].getElementsByClassName("xiala_input");
if(j==0){
for(var k=0;k<xiala_input.length;k++){
xiala_input[k].index = k;
xiala_input[k].onclick=function(){
var value = xiala_input[this.index].value;
right_select[0].value=value;
$(".xiala_div").css("display", "none")
}
}
}
if(j==1){
for(var k=0;k<xiala_input.length;k++){
xiala_input[k].index = k;
xiala_input[k].onclick=function(){
var value = xiala_input[this.index].value;
right_select[1].value=value;
$(".xiala_div").css("display", "none")
}
}
}
if(j==2){
for(var k=0;k<xiala_input.length;k++){
xiala_input[k].index = k;
xiala_input[k].onclick=function(){
var value = xiala_input[this.index].value;
right_select[2].value=value;
$(".xiala_div").css("display", "none")
}
}
}
}else{
xiala_div[j].style.display = 'none';
}
}
}else{
$(".xiala_div").css("display", "none")
}
onOff=!onOff
}
}
for( var i=0;i<right_select.length;i++ ){
right_select[i].index = i;
var onOff = true;
var This =i;
right_select[i].onclick = function(){
if(onOff) {
for( var j=0;j<xiala_div.length;j++ ){
if( this.index == j ){
xiala_div[j].style.display = 'block';
var xiala_input = xiala_div[j].getElementsByClassName("xiala_input");
if(j==0){
for(var k=0;k<xiala_input.length;k++){
xiala_input[k].index = k;
xiala_input[k].onclick=function(){
var value = xiala_input[this.index].value;
right_select[0].value=value;
$(".xiala_div").css("display", "none")
}
}
}
if(j==1){
for(var k=0;k<xiala_input.length;k++){
xiala_input[k].index = k;
xiala_input[k].onclick=function(){
var value = xiala_input[this.index].value;
right_select[1].value=value;
$(".xiala_div").css("display", "none")
}
}
}
if(j==2){
for(var k=0;k<xiala_input.length;k++){
xiala_input[k].index = k;
xiala_input[k].onclick=function(){
var value = xiala_input[this.index].value;
right_select[2].value=value;
$(".xiala_div").css("display", "none")
}
}
}
}else{
xiala_div[j].style.display = 'none';
}
}
}else{
$(".xiala_div").css("display", "none")
}
onOff=!onOff
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
前臺js改變Session的值(用ajax實現(xiàn))
前臺js改變Session的值,有很多的新手朋友對此問題會很陌生，本文將提供解決方法，需要了解的朋友可以參考下2012-12-12
淺談JavaScript中Date(日期對象),Math對象
這篇文章主要簡單介紹了JavaScript中Date(日期對象),Math對象的相關(guān)資料,需要的朋友可以參考下2015-02-02
JavaScript時間操作之年月日星期級聯(lián)操作
這篇文章主要介紹了JavaScript時間操作之級聯(lián)日期選擇操作，涉及到年、月、日、星期，感興趣的小伙伴們可以參考一下2016-01-01
前我寫過一篇關(guān)于JavaScript如何實現(xiàn)面向?qū)ο缶幊痰奈恼隆＝裉?，我寫這篇文章跟大家討論一下，如何實現(xiàn)事件。2009-07-07
本文給大家?guī)砹嘶趈s實現(xiàn)簡單的音頻播放功能，數(shù)據(jù)是由后臺提供的，具體實例代碼大家參考下本文2018-01-01
下面小編就為大家?guī)硪黄猨avascript的理解及經(jīng)典案例分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript基于對象方法實現(xiàn)數(shù)組去重及排序操作示例
這篇文章主要介紹了JavaScript基于對象方法實現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對象方法的數(shù)組遍歷、比較、去重、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
chunks 的概念與 Webpack 的代碼分割（Code Splitting）功能密切相關(guān),通過 optimization.splitChunks 配置項可以實現(xiàn)對代碼塊的分類和優(yōu)化,下面給大家介紹webpack 中 chunks配置和使用詳解,感興趣的朋友一起看看吧2025-04-04
本文給大家分享的是使用javascript實現(xiàn)的簡單的鍵盤打字效果，十分的簡單實用，推薦給有需要的小伙伴參考下。2015-04-04
呵呵，又弄成了三部曲，這是最后一部分，關(guān)于鼠標和瀏覽器本身顯示上的一些屬性。2010-06-06