javascript - 单击选择后，再次将具体化 "fixed-action-btn click-to-toggle"修改为 'collapse'

Question

我正在使用 Materialize fixed-action-btn 垂直点击切换，它的工作原理如下:单击一次打开菜单选项，再单击一次菜单将再次关闭它们。

但是，我需要单击主“菜单”按钮后可用的菜单选项，一旦单击其中任何一个按钮(而不是主菜单按钮)，它们就会再次消失/“折叠”。即我不希望用户必须再次单独重新单击菜单来隐藏菜单项。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">}

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>                   

    <div class="fixed-action-btn vertical click-to-toggle" style="bottom: 44px; right: 24px;">
    <a class="btn-floating btn-large orange lighten -3"> <i class="material-icons">menu</i>   </a>
    
    <ul>
      <li><button class="btn-floating green darken-2" onclick="displayV(1)">opt1</button></li>
      <li><button class="btn-floating green lighten-1"onclick="displayV(2)">opt2</button></li>
      <li><button class="btn-floating red lighten-1" onclick="displayV(3)">opt3</button></li>
      <li><button class="btn-floating red darken-3" onclick="displayV(4)">opt4</button></li>
    </ul>
    </div>

我如何调整这个 FAB 按钮类型？谢谢。

Answer 1

这个答案已经太晚了，但我希望它仍然可以帮助其他人解决此类问题。

1. 只需添加带有 id 的主按钮

<a id="main-btn" class="btn-floating btn-large red">

将此事件处理程序写入 .fixed-action-btn 内的所有 li 元素

$(".fixed-action-btn li").on('click', function() {
  $("#main-btn").click();
});