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;
}