分享一个简单的导航菜单代码,鼠标点击左侧的菜单,可以展开下级菜单,共三级,也可以伸缩。
菜单导航HTML代码
<ul class="expmenu">
<li>
<div class="header">
<span class="label" >欧尔陶</span>
<span class="arrow up"></span>
</div>
<span class="no">
<ul class="menu" style="display:block;">
<li onClick="javascript:ShowMenu(this, 0)"><a href="javascript:void(0)"><i>+</i> 陶瓷系列</a></li>
<ol class="no">
<a href="javascript:void(0)" title="陶瓷盆">陶瓷盆</a>
<a href="javascript:void(0)" title="拖布池">拖布池</a>
<a href="javascript:void(0)" title="妇洗器">妇洗器</a>
<a href="javascript:void(0)">小便器</a>
<a href="javascript:void(0)">蹲便器_4</a>
<a href="javascript:void(0)">智能马桶</a>
<a href="javascript:void(0)">分体坐便器</a>
<a href="javascript:void(0)">挂便器</a>
<a href="javascript:void(0)">一体坐便器</a>
</ol>
</ul>
</span>
</li>
</ul>
jQuery点击展开伸缩菜单
$("ul.expmenu li > div.header").click(function() {
var arrow = $(this).find("span.arrow");
if (arrow.hasClass("up")) {
arrow.removeClass("up");
arrow.addClass("down");
} else if (arrow.hasClass("down")) {
arrow.removeClass("down");
arrow.addClass("up");
}
$(this).parent().find("ul.menu").slideToggle();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791