宜宾网站建设公司

使用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怎么编写一个下拉列表功能-创新互联                

                本文URL：http://ybzwz.com/article/csdhgj.html
            
        
        

            
其他资讯