JavaScript按钮在一个部分不起作用

在这个站点上，我使用了一个弹出式模式窗口。在现场的所有部分中，它都被使用并且工作良好，但在其中一个部分中，它不工作，这是为什么？全球科：

 <!-- Sidebar  -->
 <nav id="sidebar">
     <div id="dismiss">

     </div>

     <div class="sidebar-header">
         <h3>Menu</h3>
     </div>

    this is menu
     </ul>

 </nav>

---

为什么它在所有部分都有效，但不在一个部分有效？有什么问题吗？

在多个部分中是否有相同的

id=“sidebarCollapse”

？id必须是唯一的，您应该为重复的元素使用类。是的，我有相同的`id=“sidebarCollapse”，但在不同的部分中使用不同的javascripts文件JavaScript文件是不相关的。它们在同一个HTML页面中吗？它们都连接在主刀片模板上

<button type="button" id="sidebarCollapse" class="btn-yellow" data-ng-if="user.accessToken">Open sidebar</button>

$(document).ready(function () {
       $("#sidebar").mCustomScrollbar({
        theme: "minimal"
    });

    $('#dismiss, .overlay').on('click', function () {
        $('#sidebar').removeClass('active');
        $('.overlay').removeClass('active');
    });

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').addClass('active');
        $('.overlay').addClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
});