最近我在我的 Blazor WebAssembly 项目中使用 TailwindCSS 创建了一个自定义导航菜单。根据设备宽度，使用 Tailwind 隐藏和设备宽度 CSS 类显示 / 隐藏侧边栏。
在特定的设备宽度上，会显示一个菜单按钮，一个针对移动侧边栏的 div 始终被隐藏（使用 display: none），在 Blazor 中，我创建了一个 @onclick 函数，将移动侧边栏的样式设置为空（因此 display: none 被移除），反之亦然。
这一切都运作得很完美，但是这种方法存在一个问题。当点击菜单按钮时，移动侧边栏被显示，如果我现在增加设备宽度，菜单按钮会自动隐藏，移动侧边栏也会被隐藏，如果我再次减小设备宽度，则菜单按钮再次显示，但“打开”的侧边栏 div 也会被显示（因为在上一个更小的设备宽度上它也被打开了（display:none 的样式已被删除））。
行为应该是，当设备宽度增加时，移动侧边栏应始终保持其样式属性 display:none。
然而，据我所知，在 Blazor 中没有触发“更改设备宽度”的事件？有什么办法可以让它工作？
以下是一些图片和 HTML 代码，显示了“问题”：
正常尺寸视图：
移动视图：
问题是当我从“移动侧边栏打开视图”返回到“正常大小视图”，然后再返回到“移动视图”时，它仍然会显示“移动侧边栏打开视图”（因为它仍然具有空的样式属性，相当于display: block）。
HTML / Blazor C# 代码：
在特定的设备宽度上，会显示一个菜单按钮，一个针对移动侧边栏的 div 始终被隐藏（使用 display: none），在 Blazor 中，我创建了一个 @onclick 函数，将移动侧边栏的样式设置为空（因此 display: none 被移除），反之亦然。
这一切都运作得很完美，但是这种方法存在一个问题。当点击菜单按钮时，移动侧边栏被显示，如果我现在增加设备宽度，菜单按钮会自动隐藏，移动侧边栏也会被隐藏，如果我再次减小设备宽度，则菜单按钮再次显示，但“打开”的侧边栏 div 也会被显示（因为在上一个更小的设备宽度上它也被打开了（display:none 的样式已被删除））。
行为应该是，当设备宽度增加时，移动侧边栏应始终保持其样式属性 display:none。
然而，据我所知，在 Blazor 中没有触发“更改设备宽度”的事件？有什么办法可以让它工作？
以下是一些图片和 HTML 代码，显示了“问题”：
正常尺寸视图：
移动视图：
问题是当我从“移动侧边栏打开视图”返回到“正常大小视图”，然后再返回到“移动视图”时，它仍然会显示“移动侧边栏打开视图”（因为它仍然具有空的样式属性，相当于display: block）。HTML / Blazor C# 代码：
<div class="md:hidden" style=@mobileSideBarDisplay> <!-- Blazor C# string that sets the display to display: none, or removes the display entirely to show it)
<div class="fixed inset-0 flex z-40">
<!--
Off-canvas menu overlay, show/hide based on off-canvas menu state.
Entering: "transition-opacity ease-linear duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "transition-opacity ease-linear duration-300"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<!-- The menu item with is Blazor onclick event -->
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" @onclick="ToggleSidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<! -- rest of HTML, left out for readability -->
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<! -- rest of HTML, left out for readability -->
</div>
</div>
<!-- Horizontal navbar with the Menu button -->
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
<!-- menu button becomes visible at a certain device-width > done with the TailWind CSS class md:hidden -->
<button class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden" aria-label="Open sidebar" @onclick="ToggleSidebar">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
</button>
<! -- rest of HTML, left out for readability -->
</div>
</div>
<!-- C# code for viewing mobile sidebar on Menu button press -->
@code {
private bool showMobileSideBar = false;
private string mobileSideBarDisplay => showMobileSideBar ? "" : "display: none;";
private void ToggleSidebar()
{
showMobileSideBar = !showMobileSideBar;
}
}