原生Js实现折叠菜单栏

<style>
        .accordion {
            width: 80%;
            margin: 0 auto;
        }

        .accordion>.title {
            background: #eee;
            border: 1px soild #aaa;
            padding: 6px;
            font-size: 1.5em;
            font-weight: bold;
            cursor: pointer;
        }

        .accordion>.content {
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
        }

        .accordion>:last-child {
            border-bottom: 1px solid #eee;
        }

        .fade {
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all .5s linear;
        }

        .in {
            height: 84px;
            opacity: 1;
        }
    </style>

 <div class="accordion">
        <div class="title" data-index="1">菜单一</div>
        <div class="content fade ">1 </div>
        <div class="title" data-index="2">菜单二</div>
        <div class="content fade">2</div>
        <div class="title" data-index="3">菜单三</div>
        <div class="content fade">3</div>
 </div>

<script>
        var accordion = document.querySelector('.accordion');
        var title = document.getElementsByClassName('title');
        var content = document.getElementsByClassName('content');
        accordion.onclick = (e) => {
            if (e.target.className == 'title') {
                e.target.nextElementSibling.classList.toggle('in');
                e.target.getAttribute('data-index') != 1 && e.target.previousElementSibling.classList.remove('in');
            }
        }
    </script>

效果：