在移动设备上，下面的materializecss触发按钮中的堆叠下拉列表

Question

我有一系列堆叠的按钮下拉列表，这些下拉列表在台式机上运行良好，但在移动设备（或使用Chrome模拟器）上，单击下拉菜单项也会触发其下方的按钮，从而显示其下拉列表等。 / p>

我根本无法使用materializecss下拉菜单，但想知道是否有人对此有解决方案？

此处的示例：https://codepen.io/phoebebright/pen/xmKdmb 这是so所要求的所有代码：

<div class="row">
    <div class="col s6">

        <div class="row">
            <div class="col s12">
                <h1 class="eventname">All Tests</h1>
                <div id="headline"><span id="percent">70.90</span><span id="txt">%</span>  <span class="minor">Average</span></div>
                <div id="summary"><span id="picked">5</span>&nbsp;from&nbsp;<span id="total">5</span>&nbsp; scores</div>
            </div>
        </div>

        <div class="row">
            <div class="col s12">

                <a id="group1_head" class="btn dropdown-trigger" data-filter="group1" data-target="group1_list" href="#">
                    <span class="head">All Competitions</span>

                </a>
                <ul id="group1_list" class="dropdown-content" tabindex="0">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group1_list_items">All</a></li>
                    <li><a id="di 46" href="#" class="group1_list_items">di 46</a></li>
                    <li><a id="100-102" href="#" class="group1_list_items">100-102</a></li>
                </ul>

            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <a id="group2_head" class="btn dropdown-trigger" data-filter="group2" data-target="group2_list" href="#">
                    <span class="head">All Judges</span>

                </a>
                <ul id="group2_list" class="dropdown-content" tabindex="0" style="">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group2_list_items">All</a></li>
                    <li><a id="Judge 1" href="#" class="group2_list_items">Judge 1</a></li>
                    <li><a id="Janie Scala" href="#" class="group2_list_items">Judge 2</a></li>
                </ul>

            </div>
        </div>
        <div class="row">
            <div class="col s12">
                <a id="group3_head" class="btn dropdown-trigger" data-filter="group3" data-target="group3_list" href="#">
                    <span class="head">All Riders</span>

                </a>
                <ul id="group3_list" class="dropdown-content" tabindex="0" style="">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group3_list_items">All</a></li>
                    <li><a id="Pauline Dahill" href="#" class="group3_list_items">Joe Dahill</a></li>
                    <li><a id="Paul Mc Donald" href="#" class="group3_list_items">Paul Deakin</a></li>
                    <li><a id="Lucy Austin" href="#" class="group3_list_items">Ray Austin</a></li>
                    <li><a id="Jack Carr" href="#" class="group3_list_items">John Carr</a></li>
                </ul>

            </div>
        </div>


        <div class="row">
            <div class="col s12">
                <a id="group4_head" class="btn dropdown-trigger" data-filter="group4" data-target="group4_list" href="#">
                    <span class="head">All Horses</span>

                </a>
                <ul id="group4_list" class="dropdown-content" tabindex="0" >
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group4_list_items">All</a></li>
                    <li><a id="New Horse" href="#" class="group4_list_items">New Horse</a></li>
                    <li><a id="Bornio" href="#" class="group4_list_items">Bornagain</a></li>
                    <li><a id="Belline Rover" href="#" class="group4_list_items">Bell Beayty</a></li>
                </ul>

            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <a id="group5_head" class="btn dropdown-trigger" data-filter="group5" data-target="group5_list" href="#">
                    <span class="head">All Placings</span>

                </a>
                <ul id="group5_list" class="dropdown-content" tabindex="0">
                    <!-- dropdown menu links -->
                    <li><a id="All" href="#" class="group5_list_items">All</a></li>
                    <li><a id="1" href="#" class="group5_list_items">1</a></li>
                    <li><a id="2" href="#" class="group5_list_items">2</a></li>
                    <li><a id="3" href="#" class="group5_list_items">3</a></li>
                    <li><a id="0" href="#" class="group5_list_items">0</a></li>
                </ul>

            </div>
        </div>

        <div class="row">
            <div id="about" class="col s12">
                <p class="competition"></p>
                <p class="judge"></p>
                <p class="rider"></p>
                <p class="horse"></p>
                <p class="score"></p>
                <p class="place"></p>

            </div>
        </div>

    </div>
</div>

<script>
  M.AutoInit();
</script>