mdbootstrap：隐藏的浮动按钮覆盖内容

Posted 2023-02-22

【中文标题】mdbootstrap：隐藏的浮动按钮覆盖内容

【英文标题】：mdbootstrap: hidden floating buttons overlay content

【发布时间】：2018-12-21 20:08:27

【问题描述】：

我使用的是 mdbootstrap Pro 4.5.5 版本，遇到以下问题。 为了提供基于上下文的操作，我使用固定按钮：

https://mdbootstrap.com/components/buttons/#fixed-buttons

正如我们在屏幕中看到的，组件在内容上方覆盖了一个隐藏的无序列表。在此列表中，按钮显示在悬停或点击移动设备上：

问题是：如果我在隐藏列表下方有一些链接或其他操作（这可能发生在移动设备上，正如您在第二个屏幕上看到的那样），它们不可点击并且当我触摸或时按钮已经显示点击列表下的链接。

如果有人可以提供帮助，我会很高兴。我也很高兴在 html 和 js 上实现 fab-button-bar 的其他示例或解决方案

【参考方案1】：

我自己找到了解决方案（与其说是解决方案，不如说是 hack）。它取决于 openFABMenu 和 closeFABMenu 上的速度初始化，其中只有不透明度设置为 0。仅隐藏按钮但容器已经存在：

var closeFABMenu = 函数 closeFABMenu(btn) $这个= btn; // 获取方向选项 var 水平 = $this.hasClass('horizo​​ntal'); var offsetY = void 0, offsetX = 无效 0; 如果（水平===真） 偏移X = 40； 别的 偏移量 = 40; $this.removeClass('active'); 变量时间 = 0; $this.find('ul .btn-floating').velocity('stop', true); $this.find('ul .btn-floating').velocity( 不透明度：'0'， scaleX: '.4', scaleY: '.4', translateY: offsetY + 'px', translateX: offsetX + 'px' , 持续时间：80， **显示：“无”** );

现在我重写了函数 closeFABMenu/openFABMenu 并在速度的初始值上插入了 display: none 和 display:block 。

atm 它对我有用，我们希望是最好的。但解决方案不是很干净，因为我还需要对 css 和 html 进行一些更改。想知道，我是唯一有这个重叠问题的人....