Materialize CSS下拉菜单在Blazor服务器端中不起作用

问题描述

我已经使用MaterializeCSS（https://materializecss.com）构建了一个“纯HTML”模板。

在模板内部，有一个下拉菜单，在单击事件后按预期显示。 我的代码如下：

<header>
<!-- Dropdown sub-menu -->
<ul id="dropdown-menu-profile" class="dropdown-content">
  <li><a href="#"><i class="material-icons">face</i>Profile</a></li>
  <li><a href="#"><i class="material-icons">login</i>logout</a></li>
</ul>

<!-- Navigation with main menu -->
<nav role="navigation">
  <div class="nav-wrapper">
    <ul class="right hide-on-med-and-down">
        <li>
          <!-- Activator image where the data-target must match the dropdown's id --> 
          <a class="dropdown-trigger" href="#!" data-target="dropdown-menu-profile">
               <img class="avatar responsive-img" src="img/avatar.png">
           </a>
        </li>
    </ul>
  </div>
</nav>

为了使Materialise工作，我需要注入此脚本。到目前为止一切都很好。

<script>
  $(document).ready(function(){
    $(".dropdown-trigger").dropdown({ 
        hover: false,coverTrigger: false
      });
  });

(The visual effect,after clicking)

但是，当我将HTML代码移至Blazor服务器端组件时，同样的“ onclick-> show dropdown”行为无法正常工作。

我没有任何错误，在调试器窗口中，“ id”和“ data-target”似乎具有相同的值。相同的初始化javascript可以在_Host.cshtml中完美运行。

但是，当我单击Blazor组件内的头像图像时，该下拉列表根本不会出现。

我在做什么错了？

解决方法

$(document).ready(function(){
    $(".dropdown-trigger").dropdown({ 
        hover: false,coverTrigger: false
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
<header>
<!-- Dropdown sub-menu -->
<ul id="dropdown-menu-profile" class="dropdown-content">
  <li><a href="#"><i class="material-icons">face</i>Profile</a></li>
  <li><a href="#"><i class="material-icons">login</i>Logout</a></li>
</ul>

<!-- Navigation with main menu -->
<nav role="navigation">
  <div class="nav-wrapper">
    <ul class="right">
        <li>
          <!-- Activator image where the data-target must match the dropdown's id --> 
          <a class="dropdown-trigger" href="#!" data-target="dropdown-menu-profile">
               <img class="avatar responsive-img" src="img/avatar.png">
           </a>
        </li>
    </ul>
  </div>
</nav>

,

我找到了答案！

我需要在razor组件的OnAfterRenderAsync上调用javascript！ 像这样：

在_Hosts.cshtml

Locx2

然后，在Razor组件上：

Locx1

它有效！ ：-）