JavaScript实现下拉列表


Posted in Javascript onJanuary 20, 2021

本文实例为大家分享了JavaScript实现下拉列表的具体代码,供大家参考,具体内容如下

这一次写了一个比较简单的下拉列表的实现,点击出现列表内容,再次点击列表消失,研究了很久,发现这种js写法确实比较好用。先看一下效果。

JavaScript实现下拉列表

直接上代码,js是主要写的部分,css是随意调试的,不过这个写法要用到css。

1、HTML部分的代码

<body>
<!--最外面的一层-->
<div class="outer">
<!-- 里面的-->
<div class="inner">
<h2>第一</h2>
 <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
 </ul>
</div>

<div class="inner">
 <h2>第二</h2>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</div>

<div class="inner">
 <h2>第二</h2>
 <ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
 </ul>
</div>

 <div class="inner">
  <h2>第二</h2>
  <ul>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ul>
 </div>


<!-- 里面的-->
</div>
<!--最外面一层-->
</body>

2、css部分的代码

.outer{
   margin: 0 auto;
   width: 500px;
   height: 600px;
   border: 1px solid red;
  }
  .outer .inner{
   width: 500px;
   border: 1px solid red;

  }
  .outer .inner ul{
   list-style: none;
   border: 1px solid fuchsia;
  }
  h2{
   border: 1px solid blueviolet;
   height: 30px;
   display: flex;
   justify-content: center;
   cursor: pointer;
   background-color: #74a400;
   margin: 0;
  }
  ul{
   display: none;
   

  }
  
 
  这里.ul是HTML里面没有的,要通过js来添加
  .ul{
   display: block;
   background-color: cornflowerblue;
   margin: 0;
  }
  ul li{
   border: 1px solid cornflowerblue;
   background-color: darkgray;
   display: flex;
   justify-content: center;
   margin-left: -42px;
   cursor: pointer;

}

3、最重要的js代码部分

window.onload = function () {
  // 获取h2与ul
   var h2 = document.getElementsByTagName("h2");
   var ul = document.getElementsByTagName("ul");
   //对所有的h2绑定一个点击事件
   for (let i = 0; i <h2.length ; i++) {
    h2[i].index = i;
    h2[i].onclick = function () {
 //绑定的事件是如果和h2在同一级的ul没有classname的话,就给他的classname取名为ul,如果有的话,就给他的classname置为空。
 //通过css代码可以看到有一个.ul的部分是不起作用的,因为js还没有给相应的h2的classname改变,当点击h2的时候才会改变。
 //这个写法就是不直接改变css样式内容,而是通过改变名字来实现样式的转变,这样的话,一个样式就能被用好多次,不用重复一直写样式。
     if (ul[this.index].className == ""){
      ul[this.index].className = "ul";
     }else {
      ul[this.index].className = "";
     }
    }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
js实现炫酷光感效果
Sep 05 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 #Javascript
vue实现验证用户名是否可用
Jan 20 #Vue.js
You might like
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
爱护草坪标语
2014/06/24 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年大学生工作总结
2014/11/20 职场文书
实习单位指导教师评语
2014/12/30 职场文书
小学语文复习计划
2015/01/19 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL