Javascript 带引导3的多级推送导航

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

可以在中找到一组流行且常见的示例，但是，我无法让它与引导一起工作。可以找到在引导中工作的推送菜单，但是我不知道如何在新的推送幻灯片中打开

。下拉菜单

，而不只是在默认的下拉行为中操作

这背后的目的是我的

。下拉菜单

包含太多链接，底部的链接被切断

<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 -->

项目1
项目2
项目3
项目4




项目1
项目2




项目1
项目2
项目3
项目4
项目5

JS:

$（文档）.ready（函数（）{
//在导航栏后面固定100%的高度，但不要包裹它
$（'#滑动导航条反转'）。在（$（''）之后；
$（'#滑动导航.navbar默认值'）。在（$（''）之后；
//输入您的ID或类
var-toggler='.navbar-toggle'；
var pagewrapper='#页面内容'；
var navigationwrapper='.navbar标题'；
var menuwidth='100%'；//幻灯片菜单内部的菜单本身
var slidewidth='80%'；
变量菜单='-100%'；
var slideneg='-80%'；
$（“#滑动导航”）。在（“单击”上，切换器，功能（e）{
所选变量=$（this）.hasClass（'slide-active'）；
$（“#slidemenu”）.stop（）.animate({
左：选中？菜单：“0px”
});
$（“#导航栏高度列”）.stop（）.animate({
左：选中？幻灯片：“0px”
});
$（pagewrapper）.stop（）.animate({
左：选中“0px”：滑动方向
});
$（navigationwrapper）.stop（）.animate({
左：选中“0px”：滑动方向
});
$（this）.toggleClass（'slide-active'，！selected）；
$（'slidemenu'）。toggleClass（'slide-active'）；
$（“#页面内容、.navbar、正文、.navbar标题”）.toggleClass（'slide-active'）；
});
所选变量='#slidemenu，#页面内容、正文、.navbar、.navbar标题'；
$（窗口）。打开（“调整大小”，函数（）{
如果（$（window.width（）>767&&$（'.navbar toggle'）。是（':hidden'））{
$（选定）.removeClass（'slide-active'）；
}
});
});

称为子菜单的滑入是一个向下钻取菜单。希望您能从中获得一些想法：

$(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');
        }
    });
});