Blazor菜单名称显示/隐藏功能实现求助

核心问题定位 #

你之前的代码应该是把菜单图标和文本放在了同一个条件渲染分支里，导致折叠时图标也被隐藏。解决关键是单独控制文本的显示/隐藏，让图标始终保持可见。

完整实现代码 #

<div class="sidebar-menu">
    <!-- 顶部切换按钮 -->
    <button @onclick="ToggleMenuCollapse" class="toggle-btn">
        @(isMenuCollapsed ? "▶️" : "◀️")
    </button>

    <!-- 菜单项列表 -->
    <ul class="menu-items">
        <li class="menu-item">
            <span class="menu-icon">🏠</span>
            @if (!isMenuCollapsed)
            {
                <span class="menu-label">首页</span>
            }
        </li>
        <li class="menu-item">
            <span class="menu-icon">⚙️</span>
            @if (!isMenuCollapsed)
            {
                <span class="menu-label">系统设置</span>
            }
        </li>
        <li class="menu-item">
            <span class="menu-icon">📊</span>
            @if (!isMenuCollapsed)
            {
                <span class="menu-label">数据报表</span>
            }
        </li>
    </ul>
</div>

@code {
    // 控制菜单折叠状态的变量，初始为展开（false）
    private bool isMenuCollapsed = false;

    // 切换折叠状态的方法
    private void ToggleMenuCollapse()
    {
        isMenuCollapsed = !isMenuCollapsed;
    }
}

配套CSS（优化视觉体验） #

.sidebar-menu {
    width: fit-content;
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 8px;
}

.toggle-btn {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}

.menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.menu-item:hover {
    background-color: #e0e0e0;
}

.menu-icon {
    font-size: 18px;
    /* 固定图标宽度，避免折叠时菜单宽度跳动 */
    width: 24px;
    text-align: center;
}

.menu-label {
    transition: opacity 0.2s ease;
}

错误排查要点 #

• 检查原有代码是否将图标和文本包裹在同一个@if块中，比如@if (!collapsed) { <icon><text> }，这会导致两者同时隐藏
• 确认isMenuCollapsed变量的绑定逻辑，点击按钮时是否正确触发状态切换
• 如果使用第三方UI组件库（比如Radzen、Syncfusion），需查看组件文档中是否有单独控制文本显示的参数，而非直接隐藏整个菜单项

内容的提问来源于stack exchange，提问作者neha