一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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 
                

热门栏目