jquery学习笔记：折叠菜单栏

简单的折叠菜单，未添加动画过渡，效果图如下：

1.HTML代码结构

用无序列表作为外层html结构

<ul>
        <li>
            <p>目标管理
                <img src="img/2.jpg" style="width: 15px;">
            </p>
            <div>
                <a href="#">主题空间</a>
                <a href="#">项目任务</a>
                <a href="#">工作计划</a>
                <a href="#">日程事件</a>
                <a href="#">时间视图</a>
            </div>
        </li>
        <li>
            <p>会议管理<img src="img/2.jpg" style="width: 15px;"></p>
            <div>
                <a href="#">主题空间</a>
                <a href="#">会议安排</a>
                <a href="#">待开会议</a>
                <a href="#">已开会议</a>
                <a href="#">会议资源</a>
            </div>
        </li>
        <li>
            <p>知识社区<img src="img/2.jpg" style="width: 15px;"></p>
            <div>
                <a href="#">我的收藏</a>
                <a href="#">知识广场</a>
                <a href="#">文档中心</a>
                <a href="#">我的博客</a>
                <a href="#">文档库管理</a>
            </div>
        </li>
        <li>
            <p>我的工具<img src="img/2.jpg" style="width: 15px;"></p>
            <div>
                <a href="#">综合查询</a>
                <a href="#">通讯录</a>
                <a href="#">便签</a>
                <a href="#">计算器</a>
                <a href="#">万年历</a>
                <a href="#">常用链接</a>
            </div>
        </li>
    </ul>

2.jquery代码 

$(function(){            
                $('p').click(function(){
                    // 被点击切换成减号图片，其他菜单不显示切换
                    $(this).children('img').attr('src','img/1.jpg');
                    $(this).parent("li").siblings('li').children('p').children('img').attr('src','img/2.jpg')
                    // 被点击display属性切换成flex，其他菜单不切换
                    $(this).next('div').css({'display':'flex'})
                    $(this).parent("li").siblings('li').children('div').css({'display':'none'})
                })
            });

从第二句.click()当事件被单击时，执行function(){...}下的代码，children()是找到<p>元素的子元素，parent()是找到<p>元素的上一级<li>,接着siblings()是找到<li>的兄弟元素

3.css代码

*{
    list-style: none;
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
ul{
    background-color: whitesmoke;
    margin: 20px;
    width: 220px;
}
ul li>p{
    font-weight: bold;
    background-color: #808070;
    width: 200px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #808090;;
    padding-left: 10px;
    padding-right: 10px;
}
ul li>div{
    width: 220px;
    display: none;
    flex-direction: column;
    
}
ul li>div>a{
    color: black;
    border: 1px solid grey;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
}