如何在ASP.NET MVC中创建可折叠侧边栏菜单

1. 布局结构（在_Layout.cshtml或单独视图中） #

搭建嵌套层级的HTML结构，给带子菜单的父项添加标识：

<div class="sidebar">
    <ul class="menu">
        <!-- 带二级菜单的父项 -->
        <li class="menu-item has-submenu">
            <a href="#" class="menu-link">
                <span>仪表盘</span>
                <i class="submenu-toggle">▼</i>
            </a>
            <ul class="submenu">
                <li class="submenu-item">
                    <a href="@Url.Action("Index", "Home")" class="submenu-link">首页</a>
                </li>
                <li class="submenu-item">
                    <a href="@Url.Action("Stats", "Home")" class="submenu-link">统计数据</a>
                </li>
            </ul>
        </li>

        <li class="menu-item has-submenu">
            <a href="#" class="menu-link">
                <span>用户管理</span>
                <i class="submenu-toggle">▼</i>
            </a>
            <ul class="submenu">
                <li class="submenu-item">
                    <a href="@Url.Action("List", "Users")" class="submenu-link">用户列表</a>
                </li>
                <li class="submenu-item">
                    <a href="@Url.Action("Create", "Users")" class="submenu-link">新增用户</a>
                </li>
            </ul>
        </li>

        <!-- 无二级菜单的项 -->
        <li class="menu-item">
            <a href="@Url.Action("Index", "Settings")" class="menu-link">
                <span>系统设置</span>
            </a>
        </li>
    </ul>
</div>

2. CSS 样式 #

控制侧边栏布局、菜单样式及子菜单的隐藏/显示状态：

/* 侧边栏容器 */
.sidebar {
    width: 250px;
    background-color: #2c3e50;
    color: #ecf0f1;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
}

/* 主菜单基础样式 */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    border-bottom: 1px solid #34495e;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: #ecf0f1;
    text-decoration: none;
    transition: background-color 0.2s;
}

.menu-link:hover {
    background-color: #34495e;
}

/* 子菜单切换图标 */
.submenu-toggle {
    font-size: 12px;
    transition: transform 0.2s;
}

/* 子菜单默认隐藏 */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #34495e;
}

/* 子菜单展开状态 */
.submenu.open {
    max-height: 300px;
}

/* 子菜单项样式 */
.submenu-item {
    padding-left: 25px;
}

.submenu-link {
    display: block;
    padding: 10px 15px;
    color: #bdc3c7;
    text-decoration: none;
    transition: background-color 0.2s;
}

.submenu-link:hover {
    background-color: #2c3e50;
    color: #ecf0f1;
}

/* 展开时旋转切换图标 */
.menu-item.has-submenu.open .submenu-toggle {
    transform: rotate(180deg);
}

3. JavaScript 交互逻辑 #

实现点击父菜单时的折叠/展开切换：

document.querySelectorAll('.menu-item.has-submenu .menu-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const parentItem = this.closest('.menu-item');
        const submenu = parentItem.querySelector('.submenu');
        
        // 切换展开状态类
        submenu.classList.toggle('open');
        parentItem.classList.toggle('open');
    });
});

4. MVC 路由与活跃菜单优化 #

• 用@Url.Action动态生成路由链接，避免硬编码
• 给当前页面对应的菜单添加活跃标识：

<li class="menu-item @(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : "")">
    <a href="@Url.Action("Index", "Home")" class="menu-link">
        <span>首页</span>
    </a>
</li>

添加活跃状态的CSS：

.menu-item.active .menu-link {
    background-color: #1abc9c;
    color: #fff;
}

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