如何使用 javascript 或 jQuery 动态更改 Bootstrap 5 下拉菜单的偏移量？

Question

我的网络应用包含动态构建的 Bootstrap 5 下拉菜单，这些下拉菜单可能非常大。它们需要调整大小和重新定位以充分利用屏幕空间。所以我希望能够通过 javascript 控制或调整由 Popper.js 计算的 偏移量。但我还没有完成这项工作。 Popper.js 文档不是很清楚，我还没有找到任何文档或示例说明如何在 Bootstrap 5 中执行此操作。（data-bs-offset 属性不合适，因为它无法调用函数来提供动态偏移值.)

请参阅 JSFiddle https://jsfiddle.net/Martin_ATS/cqw5mjLv/3/ 上的代码示例。我可以通过bootstrap.Dropdown.getInstance() 和jQuery $(ddelem).dropdown() 访问Dropdown 对象，如hideDropdown() 函数所示。但是，尽管多次尝试调用 setOptions() 等，我还是无法通过 javascript 更改偏移量。

我想使用 Bootstrap/Popper 计算的 y 偏移量，但调整 x 偏移量，使菜单打开时更靠近左边距，并且最好留下右边距而不是点击右边窗户。代码 sn-p 是一个简化的示例。在实际应用中，下拉菜单内容的范围可以从小（Bootstrap/Popper 的正常偏移工作正常）到非常大（包括水平或垂直滚动​​）。

谢谢！

Answer 1

获取popper的实例（也就是dd实例中的_popper），然后在modifers数组里面设置偏移量...

        var dd = bootstrap.Dropdown.getInstance(evt.relatedTarget);
        console.log(`shown.bs.dropdown ${evt.relatedTarget.id}`);

        var $ddelem = $(evt.relatedTarget);
        dd._popper.setOptions( {modifiers: [
             {
                 name: 'offset',
                 options: {
                   // calculate and set the offset as needed here..
                   offset: [30, 10],
                 },
             },
        ]})

Demo