有人有使用 Materialise Framework 激活 2 个或多个下拉菜单的解决方法吗？

Question

我正在尝试在 Materialize 中添加多个下拉元素。我发现它不起作用，但 singhshash 在这里提出了一个解决方法：

https://github.com/Dogfalo/materialize/issues/2621

我的问题是我无法激活下拉菜单访问 id='btndropdown1'，但它是唯一具有此特定名称的 ID。除了上述解决方案之外，还有其他解决方法吗？

<a id='btndropdown1' class='dropdown-trigger' href="#" data-target='dropdown1'>
  <div class="col s2 m3">
    <div class="card red darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Heizen</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">hot_tub</i>
      </div>

      <ul id='dropdown1' class='dropdown-content red darken-1'>
        <li ><a href="#!" class="black-text">Heizgeräte</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Ex-Heizgeräte</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Heizgebläse</a></li>
      </ul>
    </div>
  </div>
</a>
<a  id='btndropdown2' class='dropdown-trigger' href="#" data-target='dropdown2'>
  <div class="col s2 m2">
    <div class="card cyan darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Filterlüfter</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">view_headline</i>
      </div>
      <ul id='dropdown2' class='dropdown-content cyan'>
        <li ><a href="#!" class="black-text">Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Outdoor-Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Dach-Filterlüfter</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Lüftereinschub</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#!" class="black-text">Einbaulüfter</a></li>
      </ul>
    </div>
  </div>
</a>

<script type='text/javascript'>
  $(document).ready(function(){
    $('#btndropdown1').dropdown();
    $('#btndropdown2').dropdown();
  });
</script>

Answer 1

您的下拉菜单不起作用，因为您在 <a> 标签内添加了下拉菜单（<ul> 标签）。

如果将它移到 <a> 之外，问题就会解决。

<a id='btndropdown1' class='dropdown-trigger' href="#" data-target='dropdown1'>
  <div class="col s2 m3">
    <div class="card red darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Heizen</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">hot_tub</i>
      </div>
    </div>
  </div>
</a>
<ul id='dropdown1' class='dropdown-content red darken-1'>
  <li ><a href="#!" class="black-text">Heizgeräte</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!" class="black-text">Ex-Heizgeräte</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!" class="black-text">Heizgebläse</a></li>
</ul>
<a  id='btndropdown2' class='dropdown-trigger' href="#" data-target='dropdown2'>
  <div class="col s2 m2">
    <div class="card cyan darken-1">
      <div class="card-content white-text">
        <span class="card-title center">Filterlüfter</span>
      </div>
      <div class="center">
        <i class="material-icons large white-text">view_headline</i>
      </div>
    </div>
  </div>
</a>
<ul id='dropdown2' class='dropdown-content cyan'>
   <li ><a href="#!" class="black-text">Filterlüfter</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Outdoor-Filterlüfter</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Dach-Filterlüfter</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Lüftereinschub</a></li>
   <li class="divider" tabindex="-1"></li>
   <li><a href="#!" class="black-text">Einbaulüfter</a></li>
 </ul>

您可以在此处查看解决方案：jsFiddle

有人有使用 Materialise Framework 激活 2 个或多个下拉菜单的解决方法吗？

Has someone a workaround to activate 2 or multiple dropdowns with Materialize Framework?

jquery

materialize

dropdown