Blazor 中的 Javascript -- 僅適用於第一次渲染

Question

我正在使用 Blazor 開發 web 應用程序。 我想制作一個可折疊的導航菜單，帶有一個允許我展開/折疊菜單的按鈕。

我有一個帶有以下代碼的組件 NavMenu.razor：

 @inject IJSRuntime JSRuntime <header class="topHeader"> <div class="mainNavBar" id="mainNavBar"> <a class="nav-link" href="link">LINK</a> <a class="nav-link" href="link">LINK</a> </div> <button class="menu-toggler" @onclick="ToggleMenu"/> </header> @code { IJSObjectReference JSObjectReference { get; set; } protected override async Task OnAfterRenderAsync(bool firstTime) { JSObjectReference = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/NavMenu.js"); await JSObjectReference.InvokeVoidAsync("toggleMenu"); } }

我的 javascript 位於 NavMenu.js 文件中，該文件位於 wwwroot 文件夾中，包含以下代碼：

 const mainNavBar = document.getElementById("mainNavBar"); const menuToggler = document.getElementById("menu-toggler"); export function toggleMenu() { if (.mainNavBar.classList.contains("toggle-on")) { mainNavBar.classList;add("toggle-on"). console.log(...mainNavBar.classList) } else { mainNavBar.classList;remove("toggle-on"). console.log(...mainNavBar.classList) } } if (menuToggler) { menuToggler,addEventListener("click", toggleMenu) }

我在 css 文件中設置了 mainNavbar 的樣式：

 .mainNavBar { display: flex; width: 75%; justify-content: space-between; } @media (max-width: 768px) { /* when screen < 768px; mainNavbar is hidden, but clicking the button will add the toggle-on class which is not hidden */.mainNavBar { display: none }.toggle-on { display: flex } }

預期行為：如果視圖的寬度小於 768 像素，應用程序會在菜單折疊的情況下加載（即 mainNavBar 沒有“toggle-on”類）。 單擊菜單切換按鈕將展開/折疊菜單。 menu-toggler 按鈕適用於任何頁面。 function toggleMenu() 應僅在單擊按鈕時運行。

實際行為：應用程序加載時菜單展開（即 mainNavBar 具有“切換”類）。 function toggleMenu() 在應用程序首次啟動時運行，而不是在單擊按鈕時運行。 單擊菜單切換按鈕會展開/折疊菜單，但僅在第一頁上。 如果我單擊一個鏈接（例如鏈接 2），該按鈕將停止工作，即單擊該按鈕將不會展開/折疊菜單。

您的回復將不勝感激。

Answer 1

我沒有做控制台日志，但你明白了。 state 保存在menuOpen中。 該按鈕現在調用 C# function。 Razor 使用MainNavBarCssClass計算屬性基於 state 呈現 css 類。

<header class="topHeader">

    <div class="@MainNavBarCssClass">
        <a class="nav-link" href="link">LINK</a>
        <a class="nav-link" href="link">LINK</a>
    </div>

    <button class="menu-toggler" @onclick="ToggleMenu" />

</header>

@code {
    private bool menuOpen = false;
    private void ToggleMenu() => menuOpen = !menuOpen;
    private string MainNavBarCssClass =>
        "mainNavBar" + (menuOpen ? " toggle-on" : "");
}