最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript如何实现下拉列表 JavaScript实现下拉列表代码示例
时间:2021-01-20 编辑:袖梨 来源:一聚教程网
JavaScript如何实现下拉列表?本篇文章小编给大家分享一下JavaScript实现下拉列表代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
这一次写了一个比较简单的下拉列表的实现,点击出现列表内容,再次点击列表消失,发现这种js写法确实比较好用。先看一下效果。
直接上代码,js是主要写的部分,css是随意调试的,不过这个写法要用到css。
1、HTML部分的代码
第一
- a
- b
- c
第二
- 1
- 2
- 3
第二
- 4
- 5
- 6
第二
- 7
- 8
- 9
2、css部分的代码
.outer{ margin: 0 auto; border: 1px solid red; } .outer .inner{ border: 1px solid red; } .outer .inner ul{ list-style: none; border: 1px solid fuchsia; } h2{ border: 1px solid blueviolet; 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
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12