多个下拉触发器不打开下拉内容答案

【问题标题】：Multiple dropdown trigger not opening dropdown content多个下拉触发器不打开下拉内容
【发布时间】：2018-09-01 20:24:45
【问题描述】：

我有多个下拉触发器用于相同的下拉内容。

但是当下拉内容已经打开时，当我点击另一个下拉触发器时，下拉内容不显示。我需要单击其他地方才能显示下拉内容。

Click here to see the bug（红圈是我点击的时候）

我正在使用 Materialize v1.0.0-rc.2

下拉内容：

<ul id="user-settings-dropdown" class="dropdown-content">
  <li><a>Tornar Moderador</a></li>
  <li><a>Tornar Mentor</a></li>
  <li><a>Tornar Jogador</a></li>
  <li><a>Tirar Moderador</a></li>
  <li><a>Remover</a></li>
</ul>

下拉触发器：

<i class="material-icons dropdown-trigger" data-target="user-settings-dropdown">more_vert</i>

【问题讨论】：

尝试为每个按钮制作不同的下拉内容结构。
在我看来，最好为每个触发器使用下拉菜单的副本。
stackoverflow.com/a/52128193/8437974 ，查看这个问题的答案，和你的问题类似。
谢谢大家，我将为每个触发器创建一个下拉内容。但是没有其他方法可以做到这一点吗？

标签： javascript dropdown materialize

【解决方案1】：

好吧，如果您只想保留一个下拉结构，那么您可以使用hover: true。

<ul id="dropdown1" class="dropdown-content">
    <li>
        <a>Tornar Moderador</a>
    </li>
    <li>
        <a>Tornar Mentor</a>
    </li>
    <li>
        <a>Tornar Jogador</a>
    </li>
    <li>
        <a>Tirar Moderador</a>
    </li>
    <li>
        <a>Remover</a>
    </li>
</ul>
<div class="container">
    <div class="row">
        <div class="col s3">
            <a href="#!">Dropdown1
                <i class="dropdown-trigger material-icons" data-target="dropdown1">arrow_drop_down</i>
            </a>
        </div>
        <div class="col s3">
            <a href="#!">Dropdown2
                <i class="dropdown-trigger material-icons" data-target="dropdown1">arrow_drop_down</i>
            </a>
        </div>
        <div class="col s3">
            <a href="#!">Dropdown3
                <i class="dropdown-trigger material-icons" data-target="dropdown1">arrow_drop_down</i>
            </a>
        </div>
        <div class="col s3">
            <a href="#!">Dropdown4
                <i class="dropdown-trigger material-icons" data-target="dropdown1">arrow_drop_down</i>
            </a>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $(".dropdown-trigger").dropdown({
            hover: true
        });
    });
</script>

【讨论】：

在移动视图中，下拉菜单甚至没有打开。