Question

请观看此视频。

https://materializecss.com/floating-action-button.html

我希望FAB进入工具栏。就像文档一样。但是，当我使用代码时，它的行为就像视频一样。随着滚动它会崩溃。工具栏上未显示任何按钮。只是一个“编辑”按钮。

<div class="fixed-action-btn">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
      </a>
      <ul>
        <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
        <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
        <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
        <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
      </ul>
    </div>

jQuery代码：

$(document).ready(function(){
            $('.fixed-action-btn').floatingActionButton({
                direction: 'left',
                toolbarEnabled: true,
                hoverEnabled: false
            });
        });

Answer 1

根据文档，您可以在单击时将FAB转换为工具栏，而无需显示单个按钮选项。只需将工具栏类添加到FAB。

更改此：

<div class="fixed-action-btn">

收件人：

<div class="fixed-action-btn toolbar">

为什么FAB to Toolbar无法正常工作？

1 个答案: