大型菜单的第三级不起作用

Question

我在jsfiddle中用三级代码创建菜单。 但这不起作用。 我想像digikala.com一样设计它。 但我有问题。第三级菜单没有显示。 请帮我。 抱歉，我是html新手

<div class="navbar navbar-default yamm">
            <div class="navbar-header">
                <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
                        class="navbar-toggle">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                    </span>
                </button>
                <a href="#" class="navbar-brand">buy100</a>
            </div>
            <div id="navbar-collapse-grid" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown yamm-fw">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو اصلی<b class="caret"></b></a>
                        <ul class="nav navbar-nav dropdown-menu">
                            <!-- Grid 12 Menu -->
                            <li class="dropdown yamm-fw">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو 1<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li class="grid-demo">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                .col-sm-12
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                .col-sm-6
                                            </div>
                                            <div class="col-sm-6">
                                                .col-sm-6
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                .col-sm-4
                                            </div>
                                            <div class="col-sm-4">
                                                .col-sm-4
                                            </div>
                                            <div class="col-sm-4">
                                                .col-sm-4
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-3">
                                                .col-sm-3
                                            </div>
                                            <div class="col-sm-3">
                                                .col-sm-3
                                            </div>
                                            <div class="col-sm-3">
                                                .col-sm-3
                                            </div>
                                            <div class="col-sm-3">
                                                .col-sm-3
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-2">
                                                .col-sm-2
                                            </div>
                                            <div class="col-sm-2">
                                                .col-sm-2
                                            </div>
                                            <div class="col-sm-2">
                                                .col-sm-2
                                            </div>
                                            <div class="col-sm-2">
                                                .col-sm-2
                                            </div>
                                            <div class="col-sm-2">
                                                .col-sm-2
                                            </div>
                                            <div class="col-sm-2">
                                                .col-sm-2
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                            <div class="col-sm-1">
                                                .col-sm-1
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <!--With Offsets
                            -->
                            <li class="dropdown yamm-fw">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle"> منو2<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li class="grid-demo">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                4
                                            </div>
                                            <div class="col-sm-4 col-sm-offset-4">
                                                4 offset 4
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-3 col-sm-offset-3">
                                                3 offset 3
                                            </div>
                                            <div class="col-sm-3 col-sm-offset-3">
                                                3 offset 3
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6 col-sm-offset-3">
                                                6 offset 6
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <!--Aside Menu
                            -->
                            <li class="dropdown yamm-fw">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو3<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li class="grid-demo">
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <br>
                                                <h3>
                                                    3
                                                </h3>
                                                <br>
                                            </div>
                                            <div class="col-sm-9">
                                                <br>
                                                <h3>
                                                    9
                                                </h3>
                                                <br>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <!--Nesting Menu
                            -->
                            <li class="dropdown yamm-fw">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle">منو4<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li class="grid-demo">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                12
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                12
                                                <div class="row">
                                                    <div class="col-sm-4">
                                                        4
                                                    </div>
                                                    <div class="col-sm-4">
                                                        4
                                                    </div>
                                                    <div class="col-sm-4">
                                                        4
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
                    <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
                    <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
                </ul>

            </div>
        </div>

Answer 1

终于我找到了答案。 您可以在这里在三个级别的大型菜单中看到它。 正确的脚本是：

 <script>
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
        event.preventDefault();
        event.stopPropagation();
        // If a menu is already open we close it
       $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
        // opening the one you clicked on
        $(this).parent().addClass('open');

        var menu = $(this).parent().find("ul");
        var menupos = menu.offset();

        if ((menupos.left + menu.width()) + 30 > $(window).width()) {
            var newpos = -menu.width();
        } else {
            var newpos = $(this).parent().width();
        }
        menu.css({ left: newpos });

    });
</script>