初学者最易理解的手风琴菜单思想

初学者最易理解的手风琴菜单思想

---

html：

<div class="box">
        <ul class="list1" id="list1">
            <li name="li">
                <a href="#">list1</a>
                <ul name="ul" class="list2" id="list2">
                    <li name="li1">list1-1</li>
                    <li name="li1">list1-2</li>
                    <li name="li1">list1-3</li>
                    <li name="li1">list1-4</li>
                </ul>
            </li>
            <li name="li">
                <a href="#">list2</a>
                <ul name="ul" class="list2" id="list2">
                    <li name="li1">list2-1</li>
                    <li name="li1">list2-2</li>
                    <li name="li1">list2-3</li>
                    <li name="li1">list2-4</li>
                </ul>
            </li>
            <li name="li">
                <a href="#">list3</a>
                <ul name="ul" class="list2" id="list2">
                    <li name="li1">list3-1</li>
                    <li name="li1">list3-2</li>
                    <li name="li1">list3-3</li>
                    <li name="li1">list3-4</li>
                </ul>
            </li>
            <li name="li">
                <a href="#">list4</a>
                <ul name="ul" class="list2" id="list2">
                    <li name="li1">list4-1</li>
                    <li name="li1">list4-2</li>
                    <li name="li1">list4-3</li>
                    <li name="li1">list4-4</li>
                </ul>
            </li>
        </ul>
    </div>

css:

* {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    .list1 {
        width: 400px;
        font-size: 30px;
        text-align: center;
        margin: 100px auto 0;
    }

    .list1>li {
        width: 400px;
    }

    .list1>li>a {
        display: block;
        height: 50px;
        width: 400px;
        background-color: green;
    }

    .list1>li ul {
        width: 400px;
        display: none;
    }

    .list1>li ul li {
        height: 50px;
        background-color: yellowgreen;
    }

js:

window.onload = function() {
        var list1 = document.getElementById('list1');
        var aLi = document.getElementsByName('li');
        var aList2 = document.getElementsByName('ul');
        var aLi1 = document.getElementsByName('li1');
        //1.  点击第一层，第二层的打开，
        //1.2 再次点击第一层，第二层关闭
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onOff = true;
            aLi[i].onclick = function() {
                if (this.onOff) {
                    for (var i = 0; i < aLi.length; i++) {
                        aList2[i].style.display = 'none';
                    }
                    aList2[this.index].style.display = 'block';
                    for (var i = 0; i < aLi.length; i++) {
                        aLi[i].onOff = true;
                    }
                    this.onOff = false;
                } else {
                    aList2[this.index].style.display = 'none';
                    // this.onOff = true;
                    for (var i = 0; i < aLi.length; i++) {
                        aLi[i].onOff = true;
                    }
                }
            }
        }
    }