广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >js如何实现下拉菜单效果
  • 416

0
分享到

js如何实现下拉菜单效果

2024-04-02 19:04:59 416人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关js如何实现下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图：代码如下：<!DOCTYPE html>

这篇文章将为大家详细讲解有关js如何实现下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

效果图：

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" >
  <input type="text" name="" id="" readonly value="小型汽车号牌" class="right_select"/>
  <span  class="xialaan icon-icon09 iconfont" ></span>
  <div class="xiala_div"  >
   <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" >
  <input type="text" name="" id="" readonly value="鲁" class="right_select"/>
  <span  class="xialaan icon-icon09 iconfont" ></span>
  <div class="xiala_div"  >
   <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" >
  <input type="text" name="" id="" value="A" readonly class="right_select"/>
  <span  class="xialaan icon-icon09 iconfont" ></span>
  <div class="xiala_div"  >
   <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如何实现下拉菜单效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: js如何实现下拉菜单效果

本文链接: https://www.lsjlt.com/news/66087.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • js如何实现下拉菜单效果
    这篇文章将为大家详细讲解有关js如何实现下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图：代码如下：<!DOCTYPE html> ...
    99+
    2022-10-19
  • js如何实现省份下拉菜单效果
    这篇文章给大家分享的是有关js如何实现省份下拉菜单效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。2个下拉框，选择1级菜单后，2级菜单出现相应的备选项。如果没有选择则不能提交。...
    99+
    2022-10-19
  • HTML+JS模拟实现QQ下拉菜单效果
    功能： 1、点击我的好友会展开下拉出具体的好友 2、再次点击，会折叠内容 3、首次点击某个具体的好友，只有当前这个好友高亮 4、再次点击这个好友时，高亮状态就会消失 主要练习：js绑...
    99+
    2022-11-13
  • 原生JS如何实现导航下拉菜单效果
    这篇文章主要介绍了原生JS如何实现导航下拉菜单效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。这个导航下拉菜单需要实现的功能是：下拉菜单的...
    99+
    2022-10-19
  • css3如何实现下拉菜单效果
    本文小编为大家详细介绍“css3如何实现下拉菜单效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3如何实现下拉菜单效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。首先来看核心的HTML片断代码：<...
    99+
    2023-07-04
  • vue实现下拉菜单效果
    本文实例为大家分享了vue实现下拉菜单效果的具体代码，供大家参考，具体内容如下 下拉菜单主要运用了hover显示与隐藏以及定位的问题 效果图： 可能出现的问题 定位后菜单的div无...
    99+
    2022-11-13
  • 如何使用JS组件Bootstrap实现下拉菜单效果
    这篇“如何使用JS组件Bootstrap实现下拉菜单效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用JS组件Boo...
    99+
    2023-07-04
  • jquery实现简单下拉菜单效果
    本文用简单的几行jquery代码实现简单的下拉菜单效果，供大家参考，具体内容如下 看效果 html <ul>     <li>       主题市场    ...
    99+
    2022-11-13
  • javascript实现简单下拉菜单效果
    本文实例为大家分享了 javascript实现简单下拉菜单的具体代码，供大家参考，具体内容如下 效果： 思路：比较复杂的是样式的编写，首先是ul里面含有3个li，每个li...
    99+
    2022-11-13
    js 下拉菜单
  • js如何实现下拉菜单点击旁边收起效果
    这篇文章主要为大家展示了“js如何实现下拉菜单点击旁边收起效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何实现下拉菜单点击旁边收起效果”这篇文章吧。演...
    99+
    2022-10-19
  • js如何实现平滑过渡大型下拉菜单效果
    本篇内容主要讲解“js如何实现平滑过渡大型下拉菜单效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js如何实现平滑过渡大型下拉菜单效果”吧!代码：<!D...
    99+
    2022-10-19
  • Android实现下拉菜单Spinner效果
    Android 中下拉菜单，即如html中的<select>，关键在于调用setDropDownViewResource方法,以XML的方式定义下拉菜单要显示的模样...
    99+
    2022-06-06
    spinner Android
  • HTML+CSS如何实现简单下拉菜单效果
    小编给大家分享一下HTML+CSS如何实现简单下拉菜单效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！使用Html+css实现简单的下拉菜单代码非常简单，需要的...
    99+
    2023-06-08
  • js实现下拉菜单栏
    下面是一个基本的JavaScript实现下拉菜单栏的示例：HTML代码：```html菜单选项1选项2选项3```JavaScrip...
    99+
    2023-09-15
    JS
  • bootstrap如何实现二级下拉菜单效果
    这篇文章将为大家详细讲解有关bootstrap如何实现二级下拉菜单效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE htm...
    99+
    2022-10-19
  • jQuery实现下拉菜单滑动效果
    当我们制作网页时，有的时候会想拥有一个酷炫且顺滑的下拉菜单，虽然我们使用最基础的css和js也可以完成，但利用jQuery我们只需要非常简短的代码即可完成下面的效果 是不是非常的顺...
    99+
    2022-11-12
  • HTML+CSS+JavaScript实现下拉菜单效果
    本文实例为大家分享了HTML+CSS+JavaScript实现下拉菜单效果的具体代码，供大家参考，具体内容如下 实现思路： HTML 方面，导航栏的每个 <li> 元素里...
    99+
    2022-11-13
  • HTML+CSS3+JS如何实现下拉菜单
    这篇文章给大家分享的是有关HTML+CSS3+JS如何实现下拉菜单的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。实现效果html<div class="container"&g...
    99+
    2023-06-08
  • 原生js实现下拉菜单
    下拉菜单在实际生活中也挺常见的，它实现的js代码与tab选卡，手风琴几乎一样，在此不过多赘述。 我仿照苏宁易购官网写了一个下拉菜单，实现代码如下： <!DOCTYPE ht...
    99+
    2022-11-12
  • jquery怎么实现简单下拉菜单效果
    本文小编为大家详细介绍“jquery怎么实现简单下拉菜单效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery怎么实现简单下拉菜单效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。看效果html<...
    99+
    2023-06-30
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作