javascript - Bootstrap 5 Offcanvas - 检测 offcanvas 项目是否在加载时显示

Question

我在canvas上有一个搜索过滤器div，例如此页面上的位置、属性类型等:https://finder.createx.studio/real-estate-catalog-rent.html

在桌面设备 (=>lg) 上，它永久显示“offcanvas”，在移动设备 (

当页面加载时，如果 offcanvas 元素实际上是 offcanvas (即

我该怎么做？

类似这样的事情:

var myOffcanvas = document.getElementById('filters-sidebar');
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
var myCustomBusinessLogicCheck = true;
var isTheOffcanvasActuallyOffCanvasRightNow = ?? //detect if offcanvas element is currently actually off-canvas

if (isTheOffcanvasActuallyOffCanvasRightNow  & myCustomBusinessLogicCheck) {
    bsOffcanvas.show();
}

我尝试过的:

• 我尝试查找 *.bs.offcanvas 事件 - 但它们在页面首次加载时不会触发(并且 offcanvas 最初“隐藏”)，仅在后续交互中触发。
• 查看了 bsOffcanvas 的 _isShown 属性 - 但它在桌面上返回“false”，所以看来我无法使用它。
• 研究了 bsOffcanvas 上的其他属性，但没有发现任何明显的东西
• 我也许可以跟踪带有 d-lg-none 的元素是否可见，但感觉很hacky。但是，如果我找不到更干净的方法，这将是我的后备方案。

Answer 1

检查元素是否离开 Canvas 似乎相当于 Check if element is visible in DOM .

所以你可以使用:

var isTheOffcanvasActuallyOffCanvasRightNow = myOffcanvas.offsetParent === null;