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

第二

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

            URL地址：http://cdxtjz.cn/article/csdhgj.html
        
    
    

        
其他资讯
        

            

                    如何使用Keil下载单独的Hex文件到单片机内
                

                    Hbase之表设计原则
                

                    workerman中后端消息实时推送至前端的方法
                

                    关于java构建工具的简介
                

                    vue组件之Alert的实现代码