小编Sle*_*oyi的帖子

我正在尝试在 Blazor 应用程序中制作一个简单的下拉菜单。在 my 中声明Header.razor如下：

    <div class="header-sign">
        <div class="dropdown" id="toggleDropdown">
            <button class="button-md" type="button">
                <i data-feather="user"></i>
                <span>Personal cab</span>
            </button>
            <ul class="dropdown-list">
                <li class="dropdown-item">
                    <a class="dropdown-link" href="">
                        <p class="text-md">Cabinet</p>
                    </a>
                </li>
                <li class="dropdown-item">
                    <a class="dropdown-link" href="">
                        <p class="text-md">Sign out</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

下拉菜单可以通过 JS 脚本触发，如下所示：

$("#toggleDropdown").on("mouseenter", () => {
$(this).find(".dropdown-list").addClass("is-active");
});

我的标头声明MainLayout.razor如下：

@inherits LayoutComponentBase

<Header></Header>

<main class="main">
    @Body
</main>

<Footer></Footer>

而这种方法行不通。

如果我用完全相同的标记替换上述的Header.razorrazor 页面并以这种方式呈现它，一切都会改变：Header.cshtml_Layout.cshtml

@await Html.PartialAsync("Header")

看起来上面的标记只能在*.cshtml文件中工作，但不能在文件中工作*.razor，我不明白原因。为什么它会这样？