我無法在 XPage 中正確顯示可折疊的引導側邊欄。我在 bootstrapious.com 上找到了一個簡單的例子，為 XPage 修改了代碼，它幾乎可以作業。折疊側邊欄的按鈕沒有任何作用。我正在使用 Domino V12 和 Designer V12，以及內置的 Bootstrap4 主題。引導代碼包括它自己的 .css 檔案，以及一些用于 Font Awesome 的 .css 和 .js。我試過洗掉那些 .css 和 .js 檔案來檢查沖突。顯然，它們使頁面看起來更糟，但并沒有幫助折疊按鈕起作用。所以我把它們放回去，下面是整個頁面。有沒有我忽略的一些簡單的事情？它在 HTML 檔案中可以正常作業，但在 XPage 中不能正常作業。另一個有趣的拼圖：如果我從一個狹窄的瀏覽器視窗開始，
<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>
uj5u.com熱心網友回復：
JavaScript 檔案 popper.min.js 使用 AMD，這與 XPage 中的 Dojo 沖突。有關如何禁用 AMD 以使其作業的解決方案，請參閱此答案：https : //stackoverflow.com/a/30483034/785061
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360346.html