導航菜單的動畫效果，類似手風琴一樣可伸縮的動畫，以往實現(xiàn)起來很復雜，需要用到jquery的toggle()，或者自己寫動畫實現(xiàn)。
這里展示一份簡潔的使用css3動畫實現(xiàn)的手風琴菜單效果。

Untitled.gif

HTML部分

• 這里使用了<input>[radio]觸發(fā)菜單展開。
• label標簽作為菜單項，使用for屬性指向<input>[radio];當我們點擊label標簽的時候，實際上是點擊到了id="ac-1"的<input>[radio]標簽。

<section class="accordion">
    <div>
        <input id="ac-1" name="ac-radio" type="radio" onclick="doAccordion(this)">
        <label for="ac-1">Item Title</label>
        <div class="sub-content">
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
        </div>
    </div>
    <div>
        <input id="ac-2" name="ac-radio" type="radio" onclick="doAccordion(this)">
        <label for="ac-2">Item Title</label>
        <div class="sub-content">
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
            <div>sub content</div>
        </div>
    </div>
</section>

CSS部分

• 在.sub-content中設置transition：height 0.4s ease-in-out;作為菜單展開的動畫效果。
• 當點擊了Item Title選中了某項個菜單時，展開的菜單高度height: 140px;就會生效，產(chǎn)生動畫效果。

<style>
    .accordion {
        position: relative;
        width: 100px;
    }
    
    .accordion input {
        display: none;
    }
    
    .accordion .sub-content{
        overflow: hidden;
        height: 0px;
        transition: height 0.4s ease-in-out;
        background-color: #F5F5F5;
    }
    
    .accordion input:checked~.sub-content {
        height: 140px;
    }
</style>

好了到這里，一個css的手風琴菜單效果就完成了。

但是這里設置的菜單展開高度是一個固定值，有時候我們需要根據(jù)菜單內(nèi)容的不同來展開不同的高度，這樣就需要加入JS代碼，對DOM進行操作。

使用querySelector()方法選擇到菜單展開區(qū)域，并獲取到它的scrollHeight屬性值，賦給該區(qū)域?qū)ο蟮母叨葘傩浴?/p>

var openSubContent = self.parentNode.querySelector(".sub-content")
openSubContent.style.height = openSubContent.scrollHeight+"px";

同時，別忘了在高度賦值的代碼前面，將所有的展開區(qū)域的高度重置為0，否則會造成所有的菜單都展開而無法關閉了。

var allSubContent = document.querySelector(".accordion")
    .querySelectorAll(".sub-content");
var i = 0;
while(i < allSubContent.length) {
    allSubContent[i].style.height = 0;
    i++;
}

另外，由于<input>[radio]標簽選中以后，再次點擊不能取消checked狀態(tài)，所以我們就需要自己使用JS代碼做一個控制，這里就不再贅述。

最后，展示一下上面代碼的簡易效果

accordion.gif