• 售前

  • 售后

热门帖子
入门百科

JavaScript实现下拉列表

[复制链接]
老庞208 显示全部楼层 发表于 2021-10-25 20:04:40 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了JavaScript实现下拉列表的具体代码,供各人参考,具体内容如下
这一次写了一个比力简单的下拉列表的实现,点击出现列表内容,再次点击列表消失,研究了很久,发现这种js写法确实比力好用。先看一下效果。

直接上代码,js是主要写的部分,css是随意调试的,不外这个写法要用到css。
1、HTML部分的代码
  1. <body>
  2. <!--最外面的一层-->
  3. <div class="outer">
  4. <!-- 里面的-->
  5. <div class="inner">
  6. <h2>第一</h2>
  7. <ul>
  8.   <li>a</li>
  9.   <li>b</li>
  10.   <li>c</li>
  11. </ul>
  12. </div>
  13. <div class="inner">
  14. <h2>第二</h2>
  15. <ul>
  16.   <li>1</li>
  17.   <li>2</li>
  18.   <li>3</li>
  19. </ul>
  20. </div>
  21. <div class="inner">
  22. <h2>第二</h2>
  23. <ul>
  24.   <li>4</li>
  25.   <li>5</li>
  26.   <li>6</li>
  27. </ul>
  28. </div>
  29. <div class="inner">
  30.   <h2>第二</h2>
  31.   <ul>
  32.    <li>7</li>
  33.    <li>8</li>
  34.    <li>9</li>
  35.   </ul>
  36. </div>
  37. <!-- 里面的-->
  38. </div>
  39. <!--最外面一层-->
  40. </body>
复制代码
2、css部分的代码
  1. .outer{
  2.    margin: 0 auto;
  3.    width: 500px;
  4.    height: 600px;
  5.    border: 1px solid red;
  6.   }
  7.   .outer .inner{
  8.    width: 500px;
  9.    border: 1px solid red;
  10.   }
  11.   .outer .inner ul{
  12.    list-style: none;
  13.    border: 1px solid fuchsia;
  14.   }
  15.   h2{
  16.    border: 1px solid blueviolet;
  17.    height: 30px;
  18.    display: flex;
  19.    justify-content: center;
  20.    cursor: pointer;
  21.    background-color: #74a400;
  22.    margin: 0;
  23.   }
  24.   ul{
  25.    display: none;
  26.    
  27.   }
  28.   
  29.   这里.ul是HTML里面没有的,要通过js来添加
  30.   .ul{
  31.    display: block;
  32.    background-color: cornflowerblue;
  33.    margin: 0;
  34.   }
  35.   ul li{
  36.    border: 1px solid cornflowerblue;
  37.    background-color: darkgray;
  38.    display: flex;
  39.    justify-content: center;
  40.    margin-left: -42px;
  41.    cursor: pointer;
  42. }
复制代码
3、最告急的js代码部分
  1. window.onload = function () {
  2.   // 获取h2与ul
  3.    var h2 = document.getElementsByTagName("h2");
  4.    var ul = document.getElementsByTagName("ul");
  5.    //对所有的h2绑定一个点击事件
  6.    for (let i = 0; i <h2.length ; i++) {
  7.     h2[i].index = i;
  8.     h2[i].onclick = function () {
  9. //绑定的事件是如果和h2在同一级的ul没有classname的话,就给他的classname取名为ul,如果有的话,就给他的classname置为空。
  10. //通过css代码可以看到有一个.ul的部分是不起作用的,因为js还没有给相应的h2的classname改变,当点击h2的时候才会改变。
  11. //这个写法就是不直接改变css样式内容,而是通过改变名字来实现样式的转变,这样的话,一个样式就能被用好多次,不用重复一直写样式。
  12.      if (ul[this.index].className == ""){
  13.       ul[this.index].className = "ul";
  14.      }else {
  15.       ul[this.index].className = "";
  16.      }
  17.     }
  18. }
  19. }
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作