jQuery左侧三级下拉导航菜单

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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

});