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

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

子頁面命名為：

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

動態(tài)面板坐標為：

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

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

第三步：

進入【State1-B1】編輯，設置事件;

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

進入【State2-B1】編輯，設置事件；

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

如圖所示：

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

進入【State2-B2】和【State1-B2】編輯入截圖如下：

進入【State2-B3】和【State1-B3】編輯入截圖如下：

點擊預覽，即可運行成功啦！設置的過程中，注意坐標之間的關系，就不是很復雜了。

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