將內(nèi)容轉(zhuǎn)換成動態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/accordioncontrol1.png" alt="image" />

首先打開AxureAccordionControl.rp然后打開 Accordion Control 面板。

當(dāng)每個章節(jié)包含了許多部件，我們就會讓其可以在動態(tài)面板中可以自由的隱藏顯示。選擇中一個章節(jié)的內(nèi)容右鍵單擊 Convert to Dynamic Panel。

標(biāo)記和隱藏內(nèi)容面板

http://wiki.jikexueyuan.com/project/axure/images/accordioncontrol2.png" alt="image" />

標(biāo)記動態(tài)面板為 Section1Content，Section2Content 和 Section3Content。

一般地，每個章節(jié)的內(nèi)容都應(yīng)該被隱藏，所以對每個章節(jié)的內(nèi)容右鍵單擊隱藏。

切換可見性和 Push/Pull Widgets

http://wiki.jikexueyuan.com/project/axure/images/accordioncontrol3.png" alt="image" />

選中每個章節(jié)的頭部然后添加一個名為 Toggle Visibility for Section1Content 的動作，在添加一個 OnClick 事例。

點(diǎn)擊 Show/Hide 動作，選中名為 Section1Content 動態(tài)面板，然后選擇 Toggle 單選按鈕，接著為 Push/Pull Widgets 選擇復(fù)選按鈕

對章節(jié) 2 和章節(jié) 3 做相同的步驟，添加切換可見性的動作到章節(jié)內(nèi)容上去。

將動態(tài)面板放置到合適位置

http://wiki.jikexueyuan.com/project/axure/images/accordioncontrol4.png" alt="image" />

讓我們移動章節(jié)，讓章節(jié) 2 在章節(jié) 1 下面，章節(jié) 3 在章節(jié) 2 下面。

現(xiàn)在已經(jīng)完成了，預(yù)覽你的原型然后測試吧。你能看到當(dāng)你點(diǎn)擊章節(jié)頭部時，章節(jié)內(nèi)容會擴(kuò)張收縮，章節(jié)會上下移動。