我把offcanvas作为页面布局的一部分。默认情况下它不显示，但我希望它总是显示在大屏幕上。在小屏幕上，它应该有一个按钮来关闭它。另一个按钮来显示offcanvas被放置在它下面的菜单面板上。
我使用JavaScript在页面加载和调整页面大小时显示offcanvas，如果用户然后缩小屏幕，offcanvas应该保持可见，直到解散。
问题是，只有在offcanvas没有通过JS初始化的情况下，dismiss按钮才能在offcanvas上工作。也就是说，如果在小屏幕上打开，offcanvas是不可见的，两个按钮可以用来来回切换。但是一旦offcanvas在大屏幕上通过JS被初始化，当屏幕缩小时，解除按钮不再起作用。我正在努力弄清楚它是否丢失了一个事件，以及如何将其添加回来，如果是这样的话。
版面配置：

<!-- Button to show offcanvas (positioned underneath it) --> 
<div>
    <button class="btn" type="button" id="off-canvas-body-toggle" data-bs-toggle="offcanvas" data-bs-target="#floating-menu">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#422543" class="bi bi-arrow-bar-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8Zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5Z" />
        </svg>
    </button>
</div>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="floating-menu">
    
    <!-- Bootstrap classes d-xl-none d-lg-none hides the div with dismiss button on large screen -->
    <!-- But it becomes visible when the screen is downsized -->
    <div class="offcanvas-header d-xl-none d-lg-none">
        <!-- Dismiss button that does not work corectly -->
        <button type="button" class="btn" id="off-canvas-body-dismiss" data-bs-dismiss="offcanvas">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#422543" class="bi bi-arrow-bar-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z" /></svg>
        </button>
    </div>

    <div class="offcanvas-body">
    <!-- This contains an accordion and works fine -->
    </div>
</div>

字符串
JS：

// Once the HTML has loaded
document.addEventListener("DOMContentLoaded", function () {

// If on large screen, show offcanvas upon page load
adjust_layout();

// On resize - if large screen then always show offcanvas
addEventListener("resize", adjust_layout);
}

function adjust_layout() {
  // Get the Div that contains the offcanvas
  const menu = document.getElementById("floating-menu");
  var bsOffcanvas = new bootstrap.Offcanvas(menu);

  // If large screen - show the offcanvas
  let width = window.innerWidth;
  if (width >= 992) {
    bsOffcanvas.show();
  }
}

型