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