jQuery實現導航選單伸縮效果
阿新 • • 發佈:2018-11-04
效果描述:若選單未展開點選則顯示子選單,否則將子選單上卷收縮,同時菜單方向圖示進行改變
<!--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;
}