編輯導(dǎo)語：折疊窗效果是產(chǎn)品的一個(gè)基礎(chǔ)功能，那么如何用Axure制作呢？本文仔細(xì)介紹了通過Axure RP9實(shí)現(xiàn)折疊窗效果的詳細(xì)步驟和注意事項(xiàng)，希望對讀者有所幫助。

1、 假設(shè)做三個(gè)標(biāo)題和三個(gè)標(biāo)題的子內(nèi)容

2、 先做三個(gè)標(biāo)題的面板，三個(gè)子內(nèi)容面板

三個(gè)標(biāo)題面板：A1，B1，C1

三個(gè)子內(nèi)容面板：a1，b1，c1

3、 設(shè)置標(biāo)題面板和子內(nèi)容面板的尺寸

標(biāo)題面板：700,50

子內(nèi)容面板：700,350

4、將標(biāo)題面板和子內(nèi)容面板按照順序從坐標(biāo)（0,0）位置排列好

A1，a1，B1，b1，C1，c1

4.1 給A1增加兩個(gè)狀態(tài)：展開和折疊，默認(rèn)展開

4.2 給B1增加兩個(gè)狀態(tài)：展開和折疊，默認(rèn)展開

4.3 給C1增加兩個(gè)狀態(tài)：展開和折疊，默認(rèn)展開

如下圖所示：

5、 添加事件（只需給A1，B1，C1添加事件即可）

5.1 給A1添加事件（把產(chǎn)能標(biāo)題面板看做A1，產(chǎn)能分析面板看做a1）

總結(jié)：第一個(gè)面板的事件主要是單擊事件，包含兩種情景：每個(gè)情景包含設(shè)置標(biāo)題面板A1的狀態(tài)、設(shè)置子內(nèi)容面板顯示/隱藏、移動(dòng)下一個(gè)標(biāo)題面板B1

5.2 給B1添加事件（把業(yè)務(wù)標(biāo)題面板看做B1，業(yè)務(wù)分析面板看做b1）（把訂單標(biāo)題面板看做C1，訂單分析面板看做c1）

總結(jié)：第二個(gè)面板（中間）的事件主要是單擊事件、移動(dòng)事件，單擊事件包含兩種情景：每個(gè)情景包含設(shè)置標(biāo)題面板B1的狀態(tài)、設(shè)置子內(nèi)容面板顯示/隱藏、移動(dòng)下一個(gè)標(biāo)題面板C1，移動(dòng)事件是設(shè)置b1和C1跟隨B1的移動(dòng)而移動(dòng)。

備注：如果中間還有面板，添加事件跟B1類似，類比添加即可

5.3 給C1添加事件（把發(fā)貨標(biāo)題面板看做C1，發(fā)貨分析面板看做c1）

總結(jié)：第二個(gè)面板（最后）的事件主要是單擊事件、移動(dòng)事件，單擊事件包含兩種情景：每個(gè)情景包含設(shè)置標(biāo)題面板B1的狀態(tài)、設(shè)置子內(nèi)容面板顯示/隱藏，移動(dòng)事件是設(shè)置c1跟隨C1的移動(dòng)而移動(dòng)。

本文由 @不器 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議