javascript - 引导下拉菜单和其他组件在侧面菜单中不起作用（Sidr 插件）

Question

我正在尝试在侧边菜单中使用下拉菜单。侧边菜单是使用名为Sidr的 jQuery 插件实现的

你可以在jsfiddle上看到它

我希望侧面菜单中的下拉菜单如下图所示。实际上，当我将代码放在侧面菜单之外时，它可以工作（应用了正确的样式，并且可以打开和关闭）。

但是，当将相同的代码放在侧面菜单中时，引导样式和 jquery 似乎无法正常工作。我不知道为什么会这样。

HTML

    <!-- Link to open the side menu -->
    <a class="navbar-brand" href="#left-menu">Open</a>
    <!-- The side menu itself -->
    <div class="nav-collapse collapse">
        <div class="container">               
            <!-- Single button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
    </div>

JavaScript

jQuery(document).ready(function ($) {    
    $('.navbar-brand').sidr({
        name: 'sidr-left',
        side: 'left', 
        source: '.nav-collapse'
    });
    //this code is close sidr menu if clicked outside
    $(document).bind("click", function () {
        $.sidr('close', 'sidr-left');
    });
});

CSS

.sidr
{
    background: #f8f8f8;
    color: #333;
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    position: fixed;
    top: 0;
    width: 260px;
    z-index: 999999;
    box-shadow: 0px 2px 1px #777;
}
.sidr .sidr-inner
{
    padding:15px;
}
.sidr.left
{
    left: -260px;
    right: auto;
}

如何让它识别引导组件及其功能？

Answer 1

为避免覆盖引导功能，renaming: false应添加属性

$('.navbar-brand').sidr({
    name: 'sidr-left',
    side: 'left', 
    source: '.nav-collapse',
    renaming: false//<--
});

提琴手