jQuery实现导航菜单伸缩效果

效果描述：若菜单未展开点击则显示子菜单，否则将子菜单上卷收缩，同时菜单方向图标进行改变

<!--left_menu star-->
	<div class="leftMenu" id="leftmenu">
		<div class="menu_detail" id="leftmenu_0">
			<dl>
				<dt>分类标题1<i class="fa fa-chevron-up"></i></dt>
				<dd>
					<ul>
						<li>
							<a href="javascript:;">子标题1</a>
						</li>
						<li>
							<a href="javascript:;">子标题2</a>
						</li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt>分类标题2<i class="fa fa-chevron-up"></i></dt>
				<dd>
					<ul>
						<li>
							<a href="javascript:;">子标题1</a>
						</li>
						<li>
							<a href="javascript:;">子标题2</a>
						</li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt>分类标题3<i class="fa fa-chevron-up"></i></dt>
				<dd>
					<ul>
						<li>
							<a href="javascript:;">子标题1</a>
						</li>
						<li>
							<a href="javascript:;">子标题2</a>
						</li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt>分类标题4<i class="fa fa-chevron-up"></i></dt>
				<dd>
					<ul>
						<li>
							<a href="javascript:;">子标题1</a>
						</li>
						<li>
							<a href="javascript:;">子标题2</a>
						</li>
					</ul>
				</dd>
			</dl>
			<dl>
				<dt>分类标题5<i class="fa fa-chevron-up"></i></dt>
				<dd>
					<ul>
						<li>
							<a href="javascript:;">子标题1</a>
						</li>
						<li>
							<a href="javascript:;">子标题2</a>
						</li>
						<li>
							<a href="javascript:;">子标题3</a>
						</li>
					</ul>
				</dd>
			</dl>
		</div>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		//左侧导航的动态效果
		$('#leftmenu dl dt').click(function() {
			if(false == $(this).siblings('dd').is(':visible')){
				$(this).children().removeClass("fa-chevron-down").addClass("fa-chevron-up");
			}else{
				$(this).children().removeClass("fa-chevron-up").addClass("fa-chevron-down");
			}
			$(this).siblings('dd').slideToggle('fast');
		})
	})
</script>

给菜单标题dt添加点击事件，通过给dd添加slideToggle属性显示向上隐藏的动态效果；

同时需要通过判断dd是否显示来改变图标；这里图标用的是font-awesome，样式已经写好，只需要更改class即可；

.fa-chevron-down,.fa-chevron-up{

display: block;

line-height: 30px;

float: right;

margin-right: 10px;

}