本文主要介绍了射流研究…实现下拉菜单效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
效果图：
代码如下：
！文档类型超文本标记语言
超文本标记语言
头
meta charset=utf-8
标题/标题
style type=text/css
*{
边距：0;
填充：0;
}
正文{
宽度：460像素
边距：0自动；
字体系列： 微软雅黑；
}。搜索{
高度：23px
行高：23px
边框-底部：1px纯色# d4d 4d 4；
字体粗细：600;
}。搜索图像{
浮动：左；
显示：内嵌-块；
边距-顶部：5px
}。搜索范围{
浮动：左；
字体大小：14px
左边距：4px
}。内容1{
身高：254px
宽度：100%;
背景：# f5f5f5
border-top:1px solid # eaeaea；
填充顶部：10px
}。content1 .content1_div{
宽度：90%;
高度：43px
保证金：5px自动；
}。左侧{
宽度：30%;
高度：43px
边框：1px固体# eaeaea
字体大小：14px
文本对齐：居中；
行高：43px
浮动：左；
}。右{
宽度：68%;
高度：43px
边框：1px固体# eaeaea
字体大小：14px
文本对齐：居中；
行高：43px
浮动：左；
背景：# fff
左边距：3px
}。没错。右键选择{
显示：内嵌-块；
宽度：90%;
高度：20px
边框：无；
边框：1px纯色# a4bed4
文本对齐：居中；
方向：中心；
}。右_选择选项{
文本对齐：居中；
}。赫查{
文本对齐：居中；
边距-顶部：15px
}。jdcxx{
高度：146像素
字体大小：14px
背景：# ebebeb
背景-尺寸：封面；
padding-top:20px；
}。jdcxx p .jdcsyrxx p{
左边距：20px
字体粗细：600;
行高：33.6像素；
字体大小：14px
}。jdcxx .xx，200 .jdcsyrxx .xx{
字体粗细：100;
}。jdcsyrxx{
边距-顶部：20px
padding-top:20px；
高度：146像素
字体大小：20px
背景：# ebebeb
背景-尺寸：封面；
}。hcr，2000 .hcsj{
高度：30px
字体大小：14px
行高：30px
边框-底部：1px纯色# d4d 4d 4；
}。hcr_left{
显示：块；
浮动：左；
高度：28px
宽度：2px
边距-顶部：1px
背景：# 226ed2
}。船检局
宽度：100像素
显示：块；
浮动：左；
文本对齐：右对齐；
左边距：10px
右边距：10px
}。xm，1000 .sj{
字体粗细：600;
}。xiala_div{
top:33px；
显示：无；
z指数：600;
边框：1px纯色# A4BED4
宽度：253像素
左：13px
}。xiala_input{
行高：21px
宽度：253像素
边框：无；
大纲：无；
边距：0;
文本对齐：居中；
光标：默认；
背景：# fff
颜色：# 000;
}。xiala_input:hover{
背景：# a4bed4
}
/风格
link rel=样式表 type= text/CSS href= http://at。alicdn。com/t/font _ 8q 2 l5 tghvcvm 42t 9。半铸钢钢性铸铁(Cast Semi-Steel)
/
脚本src= http://libs。百度一下。com/jquery/2。0 .0/jquery。量滴js /脚本
/头
身体
页眉
div class=搜索
img width= src= img/img _ 09。巴布亚新几内亚/
跨度查询/span
/div
/页眉
div class=内容1
div class=content1_div
div class=left
号牌种类：
/div
div class= right style= position:relative；
输入类型=text name= id= 只读值=小型汽车号牌class=right_select/
span style= position:absolute；右：18pxtop:2px；字体大小：10px color:# a4 bed 4； xialaan icon-icon 09 icon font /span
div class= xiala _ div style= position:absolute；顶；行高：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；
输入类型=text name= id= 只读值=鲁class=right_select/
span style= position:absolute；右：18pxtop:2px；字体大小：10px color:# a4 bed 4； xialaan icon-icon 09 icon font /span
div class= xiala _ div style= position:absolute；顶；行高：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；右：18pxtop:2px；字体大小：10px color:# a4 bed 4； xialaan icon-icon 09 icon font /span
div class= xiala _ div style= position:absolute；顶；行高：20px
input type= text class= xila _ input readonly name= id= value= A /
input type= text class= xila _ input readonly name= id= value= B /
input type= text class= xila _ input readonly name= id= value= C /
/div
/div
/div
/div
脚本类型=文本/javascript
var xialakuang=$( .xialaan’)；
var right_select=$( .right _ select’)；
var xiala_div=$( .xiala _ div’)
for(var I=0；ixialakuang.lengthi)
下拉框[我]。index=I；
var onOff=true
var This=I；
下拉框[我]。onclick=function(){
if(onOff) {
for(var j=0；jxila _ div . length j){
if( this.index==j ){
xiala _ div[j]。风格。display= block
var xiala_input=xiala_div[j].getElementsByClassName( xiala _ input )；
if(j==0){
for(var k=0；kxiala _ input.lengthk ){
xiala_input[k].index=k；
xiala_input[k].onclick=function(){
var value=xiala _ input[这个。索引].价值；
右键选择[0]。值=值；
$(.xiala _ div’).css(显示,无)
}
}
}
if(j==1){
for(var k=0；kxiala _ input.lengthk ){
xiala_input[k].index=k；
xiala_input[k].onclick=function(){
var value=xiala _ input[这个。索引].价值；
右键选择[1]。值=值；
$(.xiala _ div’).css(显示,无)
}
}
}
if(j==2){
for(var k=0；kxiala _ input.lengthk ){
xiala_input[k].index=k；
xiala_input[k].onclick=function(){
var value=xiala _ input[这个。索引].价值；
右键选择[2]。值=值；
$(.xiala _ div’).css(显示,无)
}
}
}
}否则{
xiala _ div[j]。风格。display= none
}
}
}否则{
$(.xiala _ div’).css(显示,无)
}
onOff=！时断时续的
}
}
for(var I=0；iright _ select.lengthi ){
右键选择[我].index=I；
var onOff=true
var This=I；
右键选择[我].onclick=function(){
if(onOff) {
for(var j=0；jxila _ div . length j){
if( this.index==j ){
xiala _ div[j]。风格。display= block
var xiala_input=xiala_div[j].getElementsByClassName( xiala _ input )；
if(j==0){
for(var k=0；kxiala _ input.lengthk ){
xiala_input[k].index=k；
xiala_input[k].onclick=function(){
var value=xiala _ input[这个。索引].价值；
右键选择[0]。值=值；
$(.xiala _ div’).css(显示,无)
}
}
}
if(j==1){
for(var k=0；kxiala _ input.lengthk ){
xiala_input[k].index=k；
xiala_input[k].onclick=function(){
var value=xiala _ input[这个。索引].价值；
右键选择[1]。值=值；
$(.xiala _ div’).css(显示,无)
}
}
}
if(j==2){
for(var k=0；kxiala _ input.lengthk ){
xiala_input[k].index=k；
xiala_input[k].onclick=function(){
var value=xiala _ input[这个。索引].价值；
右键选择[2]。值=值；
$(.xiala _ div’).css(显示,无)
}
}
}
}否则{
xiala _ div[j]。风格。display= none
}
}
}否则{
$(.xiala _ div’).css(显示,无)
}
onOff=！时断时续的
}
}
/脚本
/body
/html
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
