首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现下拉菜单效果

Posted in Javascript onMarch 01, 2017

效果图：

js实现下拉菜单效果

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现下拉菜单效果

- Author -

luo8481824

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
js计算精度问题小结
Apr 22 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
解决vue移动端适配问题
Dec 12 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
JS实现复制功能
Mar 01 #Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 #Javascript
JS三目运算(三元运算)方法详解
Mar 01 #Javascript
vue-router 学习快速入门
Mar 01 #Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 #Javascript
Angular之指令Directive用法详解
Mar 01 #Javascript
js for循环倒序输出数组元素的实例
Mar 01 #Javascript
太空(1) NASA(1) 酶(1) 天问一号(1) 火星(2) 毅力号(1) 国际空间站(1) 人造肉(1) 美国航天局(1) 塑料(1)
You might like
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP微信支付开发实例
2016/06/22 PHP
php实现学生管理系统
2020/03/21 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
MAC彩妆英国官网：M·A·C UK
2018/05/30 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
计算 s=(x*y)1/2，用两个宏定义来实现
2016/08/11 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
一套Delphi的笔试题一
2016/02/14 面试题
品管员岗位职责
2013/11/10 职场文书
公司中秋节活动方案
2014/02/12 职场文书
环保宣传标语
2014/06/12 职场文书
公司应聘自荐书
2014/06/14 职场文书
汽车维修求职信
2014/06/15 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android