使用JavaScript怎么编写一个下拉列表功能-创新互联

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

目前创新互联已为上千家的企业提供了网站建设、域名、网页空间、网站托管、服务器托管、企业网站设计、上犹网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

1、HTML部分的代码







第一

 
      
  • a
  •   
  • b
  •   
  • c
  •  
 

第二

 
      
  • 1
  •   
  • 2
  •   
  • 3
  •  
 

第二

 
      
  • 4
  •   
  • 5
  •   
  • 6
  •  
    

第二

    

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://pwwzsj.com/article/csdhgj.html