jQuery左侧三级下拉导航菜单

分享一个简单的导航菜单代码，鼠标点击左侧的菜单，可以展开下级菜单，共三级，也可以伸缩。

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

菜单导航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();

});