本文主要介绍了射流研究…实现下拉菜单效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
效果图：
代码如下：
！文档类型超文本标记语言
超文本标记语言
头
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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。