javascript - Materializecss 下拉菜单不适用于 AngularJS

Question

我正在为前端开发一个使用 Materializecss 和 AngularJS 的网络应用程序，我的问题是 Materialize 的下拉菜单组件对我不起作用。

这是他们网站上的示例下拉列表

$( document ).ready(function(){
    $(".dropdown-button").dropdown();
});

<!-- 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>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="components.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
    </ul>
  </div>
</nav>

在他们的网站上它确实有效，但在我的网站上却没有，我猜它必须对下拉按钮的 href="#!" 部分做一些事情，因为也许 AngularJS 是试图绘制路线图或其他东西

如果这是问题所在，那么我怎样才能让 AngularJS 忽略一些 href？因为为了做下拉菜单和模式，我需要那些 href="#!"，如果没有，问题是什么，我该如何解决？

我尝试删除 href 或使用 href="" 更改它，但这没有用。

Answer 1

小心混合框架，它可以而且可能会产生意想不到的效果。至于显示和隐藏元素，这里是一个简单的例子，说明如何隐藏、显示或切换任何元素。

( demo )

HTML

<a href="javascript:void()" data-show="hidden">Show</a>
<a href="javascript:void()" data-hide="hidden">Hide</a>
<a href="javascript:void()" data-toggle="hidden">Toggle</a>
<div id="hidden"><!-- This can be any type of element -->
    <!-- Anything in here -->
</div>

CSS

#hidden {
    display: none;
}

JavaScript

$("[data-show]").on("click", function () {
    $("#" + $(this).attr("data-show")).css("display", "initial");
});
$("[data-hide]").on("click", function () {
    $("#" + $(this).attr("data-hide")).css("display", "none");
});
$("[data-toggle]").on("click", function () {
    var target = $("#" + $(this).attr("data-toggle"));
    if (target.css("display") === "none") {
        target.css("display", "initial");
    } else {
        target.css("display", "none");
    }
});

我在这里使用了 jQuery，因为您在脚本中使用了 jQuery，这也可以在纯 JavaScript 中轻松完成。确保将 JavaScript 放在 DOM 之后，否则将脚本包装在 document.onload 处理程序中。