本篇學習經驗講解如何使用ivx的if判斷組件和for循環組件來創建一個折疊菜單欄。 展示折疊菜單效果 首先，我們需要展示折疊菜單所需的效果。從圖中可以看出，側邊欄有父菜單，父菜單下有子菜單。有子菜

本篇學習經驗講解如何使用ivx的if判斷組件和for循環組件來創建一個折疊菜單欄。

展示折疊菜單效果

首先，我們需要展示折疊菜單所需的效果。從圖中可以看出，側邊欄有父菜單，父菜單下有子菜單。有子菜單的選項右邊會有箭頭，子菜單展開/未展開時，箭頭方向不同。點擊菜單選項后，內容區域會顯示對應內容。折疊面板可以用于多級菜單欄，它初始只會顯示第一層菜單選項，可以通過點擊展開或收起更深層的菜單選項。

創建側邊欄和內容區

首先，我們要創建好側邊欄和內容區。

使用循環和條件判斷組件創建折疊菜單欄

在Demo中，這個折疊菜單欄一共有3級。每一級的基礎欄都是相同的，而基礎欄就是每一級的一個選項模板。我們將這個模板與循環中的數據進行綁定，以幫助用戶選擇所需的菜單。

基礎欄中的箭頭狀態也綁定了一些信息，比如當前欄沒有子菜單時，箭頭不會顯示。有子菜單時，子菜單是否展開，箭頭的方向也不同。這些需要用到if判斷組件來判斷。每一級選項視為父選項，下一級基礎欄是父選項的子菜單。例如，在下圖中，“購物中心”，“我的訂單”，“全部訂單”都是基礎欄。“購物中心”是“我的訂單”的父選項，“我的訂單”是“全部訂單”的父選項。因此，如果要添加子菜單，就需要在每一級循環下再添加一級循環。

綁定數據與子數據

給第一級循環綁定數據時，直接綁定全部數據，因為全部數據都要注入到菜單欄中。而后面的循環只需綁定當前數據的子數據即可。

處理展開狀態和子菜單判斷

菜單欄是否為展開狀態需要一個變量來綁定，最適合使用布爾變量。因此，我們添加一個布爾變量來判斷該欄子菜單是否展開。同時，判斷當前菜單欄是否有子菜單需要用到if判斷組件。我們通過布爾變量的值來判斷是否展開子菜單，將子菜單是否可見的if判斷組件與添加的布爾變量綁定。

通過當前數據的值的長度是否為0，我們可以判斷是否有子項。因此，將是否有子項的if判斷組件與當前循環的值的長度是否為0綁定。

創建多級循環

由于子菜單也可能有其子菜單，所以創建原理和父菜單相同，只是當前循環數據不同。在Demo中一共有3級，所以我們創建了3級循環。

添加點擊事件

最后，給每級循環中的菜單欄添加點擊事件，從而實現每次點擊改變子菜單是否可見的效果。通過改變布爾變量的值，與是否展開子菜單綁定，就能實現展開或收起的效果。