效果描述:若菜单未展开点击则显示子菜单,否则将子菜单上卷收缩,同时菜单方向图标进行改变
<!--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;
}