Многократный раскрывающийся триггер не открывает раскрывающийся контент - PullRequest
Новая
       14

Многократный раскрывающийся триггер не открывает раскрывающийся контент

0 голосов
/ 01 сентября 2018

У меня есть несколько раскрывающихся триггеров для одного и того же раскрывающегося содержимого.

Но когда раскрывающийся контент уже открыт, когда я нажимаю на другой выпадающий триггер, раскрывающийся контент не отображается. Мне нужно щелкнуть где-нибудь еще, чтобы появился раскрывающийся контент.

Нажмите здесь, чтобы увидеть ошибку (красные круги - когда я нажал)

Я использую Materialise 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>

1 Ответ

0 голосов
/ 02 сентября 2018

Ну, если вы хотите сохранить только одну выпадающую структуру, вы можете использовать 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>
...