引導程序下拉列表和其他組件在側面菜單中不起作用（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