带有 Ionic 的 MaterializeCSS 下拉菜单不起作用

Posted 2023-02-22

【中文标题】带有 Ionic 的 MaterializeCSS 下拉菜单不起作用

【英文标题】：MaterializeCSS dropdown with Ionic not working

【发布时间】：2015-07-18 05:55:24

【问题描述】：

我正在使用 Materialize CSS 开发 Ionic 移动应用。问题是当我必须添加下拉菜单等组件时。

 <!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>

问题是下拉按钮中的href，它重定向到地址#而不是显示菜单的路由。

我怎样才能使这个组件工作？

谢谢

【问题讨论】：

我没试过，但也许你可以将

我试过了，还是不行..

和按钮 ?? on doc 指定任何按钮：将下拉列表添加到任何按钮。确保 data-activates 属性与 标记中的 id 匹配。 materializecss.com/dropdown.html

请将您的解决方案发布为新答案，并附上您的示例！

您找到解决方案了吗？对我来说，它甚至显示 dropdown1 内容。

【参考方案1】：

我知道现在回答这个问题已经晚了，但想分享一些东西......

我认为下拉问题出在 jQuery 上，因为您使用了 ionic 的 cordova 或 phonegap 混合应用程序不支持它。

您可以在混合应用程序中使用纯 javascript 或 angularjs。您还可以使用 ionic 的下拉菜单并使用 materializecss 的下拉设计添加自定义类，方法是从 materialize.css 文件中复制下拉类。

在 ionic 框架中使用 materializecss 的最佳方式是仅使用 CSS 代码，并使用其他 javascript 插件来获得该效果。

如果你喜欢它的一些类似于materializecss的功能，你也可以使用离子材料