引导程序下拉列表和其他组件在侧面菜单中不起作用（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//<--
});

Jsfiddle