使用Bootstrap 3进行多级推送导航

Question

我正在努力创建一个与Bootstrap 3的响应式导航配合使用的甜蜜推送菜单。

可以找到一个常见且常见的示例 here ，但是，我无法使用Bootstrap。可以在 here 中找到可在Bootstrap中运行的推送菜单，但是我无法弄清楚如何在新的推送幻灯片中打开.dropdown-menu而不仅仅是以默认的下拉行为行事。

CODEPEN

这背后的目的是我的.dropdown-menu包含太多链接而底部链接被截断。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav" style="position:fixed !important;">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-toggle"> 
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
        </div>
        <div id="slidemenu">
            <ul class="nav navbar-nav">
                <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ROOT LINK 1</a>
                    <ul class="dropdown-menu">
                        <li>ITEM 1</li>
                        <li>ITEM 2</li>
                        <li>ITEM 3</li>
                        <li>ITEM 4</li>
                    </ul>
                </li>
                <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ROOT LINK 2</a>
                    <ul class="dropdown-menu">
                        <li>ITEM 1</li>
                        <li>ITEM 2</li>
                    </ul>
                </li>
                <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ROOT LINK 3</a>
                    <ul class="dropdown-menu">
                        <li>ITEM 1</li>
                        <li>ITEM 2</li>
                        <li>ITEM 3</li>
                        <li>ITEM 4</li>
                        <li>ITEM 5</li>
                    </ul>
                </li>
            </ul>  
        </div>
    </div>
</div>

<!--wrap the page content do not style this-->
<div id="page-content">
    <div class="container" >
        <div style="width:100%;height:300px;background:#999999;"></div>
    </div><!-- /.container -->
</div><!-- /#page-content -->

JS：

$(document).ready(function () {
    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));  
    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));  

    // Enter your ids or classes
    var toggler = '.navbar-toggle';
    var pagewrapper = '#page-content';
    var navigationwrapper = '.navbar-header';
    var menuwidth = '100%'; // the menu inside the slide menu itself
    var slidewidth = '80%';
    var menuneg = '-100%';
    var slideneg = '-80%';

    $("#slide-nav").on("click", toggler, function (e) {
        var selected = $(this).hasClass('slide-active');
        $('#slidemenu').stop().animate({
            left: selected ? menuneg : '0px'
        });
        $('#navbar-height-col').stop().animate({
            left: selected ? slideneg : '0px'
        });
        $(pagewrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });
        $(navigationwrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });
        $(this).toggleClass('slide-active', !selected);
        $('#slidemenu').toggleClass('slide-active');
        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');
    });
    var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';
    $(window).on("resize", function () {
        if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
            $(selected).removeClass('slide-active');
        }
    });
});