本文主要介绍了射流研究…实现下拉菜单效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
效果图:
代码如下:
!文档类型超文本标记语言
超文本标记语言
头
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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。