用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 劳动节 12
2021年 端午节 56
2022年 元 旦 257
2022年 春 节 288
 
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现下拉列表

    内容摘要: 1、HTML部分的代码body!--最外面的一层--div class='outer'!-- 里面的--div class='inner'h2第一/h2ul lia/li lib/li lic/li/ul/divdiv class='inner'h2第二/h2ul li1/li li2/li li3/li/ul/divdiv class='inner'h2第......

      1、HTML部分的代码

    <body>

    <!--最外面的一层-->

    <div class="outer">

    <!-- 里面的-->

    <div class="inner">

    <h2>第一</h2>

    <ul>

    <li>a</li>

    <li>b</li>

    <li>c</li>

    </ul>

    </div>


    <div class="inner">

    <h2>第二</h2>

    <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    </ul>

    </div>


    <div class="inner">

    <h2>第二</h2>

    <ul>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    </ul>

    </div>


    <div class="inner">

    <h2>第二</h2>

    <ul>

    <li>7</li>

    <li>8</li>

    <li>9</li>

    </ul>

    </div>



    <!-- 里面的-->

    </div>

    <!--最外面一层-->

    </body>

    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;

    }

    h2{

    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 () {

    // 获取h2与ul

    var h2 = document.getElementsByTagName("h2");

    var ul = document.getElementsByTagName("ul");

    //对所有的h2绑定一个点击事件

    for (let i = 0; i <h2.length ; i++) {

    h2[i].index = i;

    h2[i].onclick = function () {

    //绑定的事件是如果和h2在同一级的ul没有classname的话,就给他的classname取名为ul,如果有的话,就给他的classname置为空。

    //通过css代码可以看到有一个.ul的部分是不起作用的,因为js还没有给相应的h2的classname改变,当点击h2的时候才会改变。

    //这个写法就是不直接改变css样式内容,而是通过改变名字来实现样式的转变,这样的话,一个样式就能被用好多次,不用重复一直写样式。

    if (ul[this.index].className == ""){

    ul[this.index].className = "ul";

    }else {

    ul[this.index].className = "";

    }

    }

    }

    }

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/1/20 发布时间:16:57:04 点击:551 录入:齐天大圣
  • 上一篇:Ajax实现无闪烁定时刷新页面
  • 下一篇:js实现简单的倒计时
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.01 Build 21.03.31(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021