爬行蟑螂也是剛開始使用Axure，這里分享動(dòng)態(tài)面板之折疊和展開。當(dāng)然也是參考別人的，及時(shí)給大家分享，也是想要記錄下來；

第一步：創(chuàng)建三個(gè)動(dòng)態(tài)面板，分別添加2個(gè)子動(dòng)態(tài)面板頁面；三個(gè)動(dòng)態(tài)面板命名及坐標(biāo)（x，y）寬高(w,h)如下所示：

子頁面命名為：

• B1——State1-B1，State2-B1；
• B2——State1-B2，State2-B2；
• B3——State1-B3，State2-B3；

動(dòng)態(tài)面板坐標(biāo)為：

• B1——【0，0】，【200,300】；
• B2——【0，50】，【200,300】；
• B3——【0，100】，【200,300】

第二步：進(jìn)入動(dòng)態(tài)面板【State1-B1】和【State2-B1】的編輯頁面，分別在兩個(gè)頁面添加兩個(gè)矩形，小矩形坐標(biāo)及大小為：（0,0）（200,50），大矩形坐標(biāo)及大小為：（0,50）（200,250）；填充內(nèi)容及顏色作為標(biāo)記；且將動(dòng)態(tài)面板【State1-B1】的大矩形設(shè)置為隱藏；其他面板的設(shè)置一樣；分別如圖所示：

第三步：

進(jìn)入【State1-B1】編輯，設(shè)置事件;

1. 選中小矩形M1——添加事件【鼠標(biāo)單擊】——【設(shè)置面板狀態(tài)】——選擇動(dòng)態(tài)面板【B1】——選擇狀態(tài)【State2-B1】——確認(rèn)
2. 繼續(xù)添加事件【移動(dòng)】——勾選動(dòng)態(tài)面板【B2】——移動(dòng)【相對(duì)位置】——設(shè)置坐標(biāo)為（0，250）——確認(rèn)
3. 繼續(xù)添加事件【移動(dòng)】——勾選動(dòng)態(tài)面板【B3】——移動(dòng)【相對(duì)位置】——設(shè)置坐標(biāo)為（0，250）——確認(rèn)

進(jìn)入【State2-B1】編輯，設(shè)置事件；

1. 選中小矩形M1——添加事件【鼠標(biāo)單擊】——【設(shè)置面板狀態(tài)】——選擇動(dòng)態(tài)面板【B1】——選擇狀態(tài)【State1-B1】——確認(rèn)
2. 繼續(xù)添加事件【移動(dòng)】——勾選動(dòng)態(tài)面板【B2】——移動(dòng)【相對(duì)位置】——設(shè)置坐標(biāo)為（0，-250）——確認(rèn)
3. 繼續(xù)添加事件【移動(dòng)】——勾選動(dòng)態(tài)面板【B3】——移動(dòng)【相對(duì)位置】——設(shè)置坐標(biāo)為（0，-250）——確認(rèn)

如圖所示：

其他設(shè)置也是同上，就不用文字累贅了。

進(jìn)入【State2-B2】和【State1-B2】編輯入截圖如下：

進(jìn)入【State2-B3】和【State1-B3】編輯入截圖如下：

點(diǎn)擊預(yù)覽，即可運(yùn)行成功啦！設(shè)置的過程中，注意坐標(biāo)之間的關(guān)系，就不是很復(fù)雜了。

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