ASP.NET MVC 7网站侧边栏切换按钮整合至导航栏求助

API 探路者

2026-7-6

问题：ASP.NET MVC 7侧边栏切换按钮失效排查

我在ASP.NET MVC 7网站开发侧边栏，将切换按钮整合到顶部导航栏后，按钮无法正常触发侧边栏显示/隐藏功能。以下是相关代码，请求协助排查：

代码文件

_Layout.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RecipeWebsite</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/RecipeWebsite.styles.css" asp-append-version="true" />

    <!--Added-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <!-- 错误：JS文件用了link标签，应改为script，已注释 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"> -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> -->
</head>

<body id="body-pd">

    <!--Top Nav bar-->
    <div>
        <partial name="~/Views/Shared/Navbar/_Navbar.cshtml" />
    </div>

    <!--Side bar-->
    <div>
        <partial name="~/Views/Shared/Sidebar/_Sidebar.cshtml" />
    </div>

    <!--Render Body-->
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <!--Bottom Navbar-->
    <footer class="border-top footer text-muted ps-10 align-bottom">
        <div class="container-fluid">
            &copy; 2023 - RecipeWebsite - <a asp-area="" asp-controller="Privacy" asp-action="Index">Privacy</a>
        </div>
    </footer>

    <!--JQuery-->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>

    <!--Bootstrap-->
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <!--JavaScript-->
    <script src="~/js/site.js" asp-append-version="true"></script>

    <!--JavaScript Added-->
    <script src="~/js/created/sidebar.js"></script>

    <!--CSS Added-->
    <link rel="stylesheet" href="~/css/created/sidebar.css" />

    @await RenderSectionAsync("Scripts", required: false)

</body>
</html>

<header class="header" id="header">
    <!--Sidebar Toggle-->
    <div class="header_toggle p-3"> <i class='bx bx-menu' id="header-toggle"></i> </div>

    <!--Identity-->
    <partial name="~/Views/Shared/Navbar/_Identity.cshtml" />
</header>

<div class="l-navbar" id="nav-bar">
    <nav class="nav">
        <div>
            <a asp-controller="Home" asp-action="Index" class="nav_logo">
                <i class='bx bx-layer nav_logo-icon'></i>
                <span class="nav_logo-name">RecipeWebsite</span>
            </a>

            <div class="nav_list">
                <a asp-controller="Home" asp-action="Index" class="nav_link active">
                    <i class='bx bx-home nav_icon'></i>
                    <span class="nav_name">Home</span>
                </a>
                <a asp-controller="Home" asp-action="Privacy" class="nav_link">
                    <i class='bx bx-user nav_icon'></i>
                    <span class="nav_name">Privacy Policy</span>
                </a>
                <a asp-controller="Post" asp-action="Index" class="nav_link">
                    <i class='bx bx-bookmark nav_icon'></i>
                    <span class="nav_name">Recipe Post</span>
                </a>
                <a asp-controller="Collection" asp-action="Index" class="nav_link">
                    <i class='bx bx-folder nav_icon'></i>
                    <span class="nav_name">Recipe Collection</span>
                </a>
            </div>
        </div>
    </nav>
</div>

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

:root {
    --header-height: 3rem;
    --nav-width: 68px;
    --first-color: #4723D9;
    --first-color-light: #AFA5D9;
    --white-color: #F7F6FB;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100
}

*, ::before, ::after {
    box-sizing: border-box
}

body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s
}

a {
    text-decoration: none
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    /* 问题：padding-top会把导航栏内容顶出可视区域，已注释 */
    /* padding-top: 100px; */
    background-color: var(--white-color);
    z-index: var(--z-fixed);
    transition: .5s
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

    .header_img img {
        width: 40px
    }

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.nav_logo, .nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem
}

.nav_logo {
    margin-bottom: 2rem
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {
    color: var(--white-color);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--first-color-light);
    margin-bottom: 1.5rem;
    transition: .3s
}

    .nav_link:hover {
        color: var(--white-color)
    }

.nav_icon {
    font-size: 1.25rem
}

.show {
    left: 0
}

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem)
}

.active {
    color: var(--white-color)
}

    .active::before {
        content: '';
        position: absolute;
        left: 0;
        width: 2px;
        height: 32px;
        background-color: var(--white-color)
    }

.height-100 {
    height: 100vh
}

@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }

    .header_img {
        width: 40px;
        height: 40px
    }

        .header_img img {
            width: 45px
        }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }

    .show {
        width: calc(var(--nav-width) + 156px)
    }

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px)
    }
}

document.addEventListener("DOMContentLoaded", function (event) {

    const showNavbar = (toggleId, navId, bodyId, headerId) => {
        const toggle = document.getElementById(toggleId),
            nav = document.getElementById(navId),
            bodypd = document.getElementById(bodyId),
            headerpd = document.getElementById(headerId)

        // Validate that all variables exist
        if (toggle && nav && bodypd && headerpd) {
            toggle.addEventListener('click', () => {
                // show navbar
                nav.classList.toggle('show')
                // change icon
                toggle.classList.toggle('bx-x')
                // add padding to body
                bodypd.classList.toggle('body-pd')
                // add padding to header
                headerpd.classList.toggle('body-pd')
            })
        }
    }

    showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

    /*===== LINK ACTIVE =====*/
    const linkColor = document.querySelectorAll('.nav_link')

    function colorLink() {
        if (linkColor) {
            linkColor.forEach(l => l.classList.remove('active'))
            this.classList.add('active')
        }
    }
    linkColor.forEach(l => l.addEventListener('click', colorLink))

});

问题排查与修复步骤

修复资源加载错误
在_Layout.cshtml的<head>中，错误地用<link>标签引入了JS文件（bootstrap.bundle.min.js和jquery.min.js），JS文件必须用<script>标签引入。直接删除这两行错误代码，避免资源加载失败导致sidebar.js无法执行。
移除导航栏多余内边距
sidebar.css中.header类的padding-top: 100px会把导航栏内容向下推，导致切换按钮被移出可视区域或遮挡，删除该属性确保按钮在页面顶部可点击。
避免框架重复引入
当前代码同时引入了本地和CDN版本的Bootstrap与jQuery，易引发冲突。建议保留一套即可，比如保留本地Bootstrap和jQuery，删除CDN版本的Bootstrap CSS引入。
验证元素选择器匹配
确认#header-toggle、#nav-bar、#body-pd、#header这些ID与页面元素一一对应，sidebar.js中的元素获取逻辑本身正确，修复资源加载问题后即可正常触发切换事件。

完成以上修改后，刷新页面测试，侧边栏切换功能即可正常工作。

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

ASP.NET MVC 7网站侧边栏切换按钮整合至导航栏求助

代码文件 #

_Layout.cshtml #

_Navbar.cshtml #

_Sidebar.cshtml #

sidebar.css #

sidebar.js #

问题排查与修复步骤 #

代码文件

_Layout.cshtml

_Navbar.cshtml

_Sidebar.cshtml

sidebar.css

sidebar.js

问题排查与修复步骤