# 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事件配合使用） ```