jQuery左侧三级下拉导航菜单_导航菜单_下拉导航_下拉菜单

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

淘建站为您提供更多_导航菜单_下拉导航_下拉菜单，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 366 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

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

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

});

jQuery左侧三级下拉导航菜单

菜单导航HTML代码

jQuery点击展开伸缩菜单

天天