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

Question

我正在使用mdbootstrap Pro 4.5.5版本，并且存在以下问题。 为了提供基于上下文的操作，我使用固定按钮：

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

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

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

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

Answer 1

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

    var closeFABMenu = function closeFABMenu(btn) {
    $this = btn;
    // Get direction option
    var horizontal = $this.hasClass('horizontal');
    var offsetY = void 0,
    offsetX = void 0;

    if (horizontal === true) {
    offsetX = 40;
    } else {
    offsetY = 40;
    }

    $this.removeClass('active');
    var time = 0;
    $this.find('ul .btn-floating').velocity('stop', true);
    $this.find('ul .btn-floating').velocity({
    opacity: '0',
    scaleX: '.4',
    scaleY: '.4',
    translateY: offsetY + 'px',
    translateX: offsetX + 'px'
    }, {
    duration: 80,
    **display: "none"**
    });

现在，我改写了函数closeFABMenu / openFABMenu并插入了display：none和display：block来表示速度。

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