Bootstrap XPages 中的边栏不会折叠

Question

我无法让可折叠的 bootstrap 边栏在 XPages 中正确显示。我在 bootstrapious.com 找到了一个简单的示例，为 XPage 修改了代码，它几乎可以工作。折叠侧边栏的按钮不执行任何操作。我使用的是 Domino V12 和 Designer V12，以及内置的 Bootstrap4 主题。 bootstrapious 代码包括它自己的 .css 文件，以及用于 Font Awesome 的一些 .css 和 .js。我尝试删除那些 .css 和 .js 文件以检查冲突。显然，它们使页面看起来更糟，但并没有帮助折叠按钮发挥作用。所以我把它们放回去，下面是整个页面。我忽略了一些简单的事情吗？它在 HTML 文件中工作正常，但在 XPages 中却不行。另一块有趣的拼图：如果我从窄浏览器 window 开始，侧边栏开始折叠，但按钮仍然不会展开它。

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">

    <xp:this.resources>
        <xp:styleSheet href="/style2.css"></xp:styleSheet>
        <xp:script
            src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
            clientSide="true">
        </xp:script>
        <xp:script
            src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>
    
    <div class="wrapper">
        <!-- Sidebar  -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>

            <ul class="list-unstyled components">
                <p>Dummy Heading</p>
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">Page 1</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>

            <ul class="list-unstyled CTAs">
                <li>
                    <a href="https://bootstrapious.com" target="_blank">bootsrapious</a>
                </li>
            </ul>
        </nav>

        <!-- Page Content  -->
        <div id="content">

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">

                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fas fa-align-left"></i>
                        <span>Toggle Sidebar</span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <h2>Collapsible Sidebar Using Bootstrap 4</h2>
            <p>text</p>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(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>
</xp:view>

Answer 1

JavaScript文件popper.min.js使用了与XPages中的Dojo冲突的AMD。有关如何禁用 AMD 以使其正常工作的解决方案，请参阅此答案：

Bootstrap XPages 中的边栏不会折叠

Bootstrap sidebar in XPages won't collapse

twitter-bootstrap

xpages

sidebar