效果描述：若選單未展開點選則顯示子選單，否則將子選單上卷收縮，同時菜單方向圖示進行改變

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

}