使用JavaScript怎么编写一个下拉列表功能-创新互联
本篇文章给大家分享的是有关使用JavaScript怎么编写一个下拉列表功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

1、HTML部分的代码
第一
- a
- b
- c
第二
- 1
- 2
- 3
第二
- 4
- 5
- 6
第二
- 7
- 8
- 9
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;
}
h3{
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 () {
// 获取h3与ul
var h3 = document.getElementsByTagName("h3");
var ul = document.getElementsByTagName("ul");
//对所有的h3绑定一个点击事件
for (let i = 0; i 以上就是使用JavaScript怎么编写一个下拉列表功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
当前题目:使用JavaScript怎么编写一个下拉列表功能-创新互联
网页地址:http://www.jxjierui.cn/article/csdhgj.html


咨询
建站咨询
