Javascript 引导下拉列表和其他组件不'；在侧菜单中不工作（Sidr插件）

我试着在侧菜单中使用下拉菜单。侧菜单是使用jQuery插件实现的，该插件名为

你可以在电视上看到

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

但是，如果将相同的代码放在侧菜单中，则看起来引导样式和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>

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

---

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

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

重命名：false

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

$（'.navbar品牌'）.sidr({
名称：'sidr left'，
边:"左",，
来源：“.nav折叠”，
重命名：false//是否包含对引导css的引用？我将/css/bootstrap.css包含到html文件中，这就是为什么当我将该代码放在div.nav-collapse-it-works之外时，我尝试使用您的代码制作代码段，但它不起作用。我认为您在此处编写的代码中缺少某些内容。我添加了JSFIDLE和pic，其中包含下拉菜单侧菜单（奇怪的渲染）和外部菜单（工作下拉菜单）
$('.navbar-brand').sidr({
    name: 'sidr-left',
    side: 'left', 
    source: '.nav-collapse',
    renaming: false//<--
});