前端培训：添加折叠特效

在menu.html中添加jQuery代码，实现菜单的折叠特效。

menu.html 图2-17 静态页面效果

 上述代码中，选择器“.menu——head+div”可获取所有菜单项下的子菜单，调用jQuery提供的hide()方法即可完成所有子菜单的隐藏。然后在class值为menu——head的元素上注册单击事件，每当单击事件被触发时，执行第7～18行代码进行相关的处理。

　　下面分别对第7～18行代码进行重点讲解，具体如下所示。

　　·第8行使用css()方法设置被单击的p元素的图标。

　　·第10行使用next()方法找到p元素下的div元素，并调用jQuery提供的show()方法显示匹配到的元素。

　　·第12行使用parent()方法找到p元素上级的li元素，并使用变量parentli保存。

　　·第13行使用parentli调用siblings()方法找到其他同级的li元素，即一级菜单。

　　·第15行使用children()方法找到同级li元素的子元素p，并使用css()方法设置要显示的图标。

　　·第18行使用children()方法获取同级li元素下的div元素，并调用jQuery提供的hide()方法隐藏匹配到的元素。

　　添加上述jQuery代码后，本案例的全部代码已经给出，测试方法读者可以参考案例展示。

文章来自：前端培训http://web.itheima.com

标签：jQuery,特效,代码,menu,折叠,元素,li,方法,前端
来源： https://www.cnblogs.com/zy-1092/p/16034696.html