zoukankan      html  css  js  c++  java
  • 左边栏二级菜单点击显示点击隐藏

    自己手撸的,记录一下

    <meta charset="utf-8">
    <style>
        .ok,.two{
            list-style: none;
             200px;
            margin-top: 0;
            padding-left: 0;
        }
        .ok li{
            background: darkgoldenrod;
        }
        .d{
            height: 35px;
            line-height: 35px;
            padding-left: 5px;
            color: white;
            cursor: pointer;
        }
        .d:nth-of-type(n+1){
            margin-top: 5px;
    
        }
        .two{
            padding-left: 0px;
        }
        .two li{
            background: chocolate;
            margin-top: 5px;
            padding-left: 10px;
    
    
        }
        .none{
            display: none;
        }
        .block{
            display: block;
        }
        .three{
            list-style: none;
        }
    </style>
    
    <div>
        <ul class="ok" id="t">
            <li class="d">产品中心</li>
            <ul class="two block">
                <li>产品系列一</li>
                <li>产品系列二</li>
                <li>产品系列三</li>
            </ul>
            <li class="d">新闻中心</li>
            <ul class="two block">
                <li>公司新闻</li>
                <li>行业新闻</li>
            </ul>
        </ul>
    </div>
    
    <script>
        var a= document.getElementById("t");
        var s=a.children;
        for(var i=0;i<=s.length-1;i++){
            if(s[i].classList.contains('d')){
                s[i].onclick= function () {
                    var zt=this.nextElementSibling;
                    console.log(zt);
                    if (zt.classList.contains('block')){
                        this.nextElementSibling.setAttribute('class','none');
                    }
                    else{
                        this.nextElementSibling.classList.add('two','block');
                    }
                };
            }
        }
    </script>
    

      

  • 相关阅读:
    反向迭代
    c++知识点
    LeetCode-Count Bits
    LeetCode-Perfect Rectangle
    LeetCode-Perfect Squares
    LeetCode-Lexicographical Numbers
    LeetCode-Find Median from Data Stream
    LeetCode-Maximal Square
    LeetCode-Number of Digit One
    LeetCode-Combination Sum IV
  • 原文地址:https://www.cnblogs.com/no000000/p/12401127.html
Copyright © 2011-2022 走看看