前端培训：添加折叠特效

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

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

<script src="js/jquery-1.12.4.js"></script>
<script>
    //隐藏所有二级菜单
    $('.menu-head + div').hide();
    //显示当前，隐藏其他
    $('.menu-head').click(function() {
       //设置当前菜单右侧图标样式 
       $(this).css('backgroundImage', 'url(img/pro_down.png)');
       //显示当前菜单对应的子菜单
       $(this).next('div').show();
       //获取其他菜单外层的li元素
       var parentli = $(this).parent('li');
       var lis = parentli.siblings('li');
       //找到每个li元素下的主菜单，设置主菜单右侧图标样式
       lis.children('p').css('backgroundImage',
                             'url(img/pro_left.png)');
       //隐藏其他主菜单下的子菜单
       lis.children('div').hide();
    });
</script>

　　上述代码中，选择器“.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代码后，本案例的全部代码已经给出，测试方法读者可以参考案例展示。