# 1、開發思路 點擊頁面中的頂級菜單，會下拉它的子菜單。 首先要找到頂級菜單，然后綁定單擊事件，點擊頂級菜單的時候，讓其對應的子菜單慢慢滑動下來；再次點擊頂級菜單，其對應的子菜單慢慢滑動隱藏。 # 2、用到的知識點 2.1、全新的事件 ``` toggle--單擊的時候被會觸發，觸發之后它會自動檢查選擇的元素是什么狀態，如果是顯示狀態則隱藏，如果是隱藏狀態則顯示。也就是它會自動判斷元素的顯示和隱藏。 toggle()應該算一個效果，只不過和事件有關系，它必須是單擊事件才能夠觸發。 ``` 2.2、優雅的效果 ``` show()：單純的顯示。參數是一個毫秒單位的時間，表示經過多少毫秒的變化讓元素顯示出來。 hide()：單純的隱藏。參數是一個毫秒單位的時間，表示經過多少毫秒的變化讓元素隱藏起來。 toggle()：是show和hide方法的一個綜合體，可以自動根據元素原來的狀態切換顯示和隱藏。 slideDown()：向下滑動，顯示。參數是一個毫秒單位的時間，表示經過多少毫秒的變化讓元素滑動出來。 slideUp()：向上滑動，隱藏。參數是一個毫秒單位的時間，表示經過多少毫秒的變化讓元素滑動隱藏。 slideToggle()：slide效果的一個綜合體。可以根據元素的原來的狀態來自動切換顯示和隱藏。 ``` # 3、創建目錄結構  # 4、HTML和css HTML代碼：  css代碼：  # 5、JS實現效果  # 6、案例總結 效果： ``` show hide toggle（注意，要和click事件配合使用） slideDown() slideUp() slideToggle();（注意，要和click事件配合使用） ```