Domino V12下XPages中Bootstrap侧边栏折叠按钮失效问题咨询

问题根因与修复方案 #

你遇到的侧边栏折叠按钮无响应问题，是XPages适配Bootstrap时的几个常见问题导致的，按以下优先级修复即可：

• 缺失mCustomScrollbar依赖：代码中调用了自定义滚动条方法$("#sidebar").mCustomScrollbar()，但没有引入该jQuery插件的CSS和JS文件，会直接导致页面加载后整段脚本执行报错中断，后续的点击事件绑定逻辑完全不会运行。如果不需要自定义滚动条效果，直接删除这段代码即可，不会影响侧边栏折叠功能。
• jQuery别名冲突：Domino平台内置的jQuery默认会启用noConflict()模式释放$别名，避免和其他库冲突，直接用$调用会直接报错。你可以把脚本里的所有$替换成jQuery，或者在脚本开头加一行const $ = jQuery;声明别名即可解决。
• 未引入Bootstrap JS：Domino V12内置的Bootstrap4主题默认仅加载CSS资源，Bootstrap交互所需的JS文件需要你手动配置加载，也可以直接在xp:this.resources节点里添加Bootstrap4的JS引用，注意要放在popper.js的后面。
• 确认折叠样式存在：检查你引入的style2.css里是否有#sidebar.active、#content.active对应的侧边栏收缩、内容区撑开的样式定义，如果缺少对应样式，就算类切换成功也看不到折叠效果。

最简修复脚本示例 #

你可以先把页面末尾的脚本替换为以下内容，移除缺失依赖的滚动条逻辑，先解决脚本执行中断的问题：

<script type="text/javascript">
    const $ = jQuery; // 解决XPages环境下的jQuery别名冲突
    $(document).ready(function () {
        // 暂时注释掉缺失依赖的自定义滚动条代码
        // $("#sidebar").mCustomScrollbar({
        //     theme: "minimal"
        // });

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

如果需要保留自定义滚动条效果，额外引入jQuery Custom Scrollbar对应的CSS和JS资源即可正常使用。

内容的提问来源于stack exchange，提问作者Ken Barnes