如何通过 JavaScript 动态切换二级导航栏的显示与隐藏-js教程-PHP中文网

如何通过 JavaScript 动态切换二级导航栏的显示与隐藏

本文介绍在 ASP.NET Core MVC 项目中，如何利用原生 JavaScript 正确绑定点击事件，根据主导航菜单项的点击动态显示对应的二级导航栏（如 PrognosisNav、RoosterNav），并解决因依赖 asp-* 属性导致 DOM 查询失败的问题。

本文介绍在 asp.net core mvc 项目中，如何利用原生 javascript 正确绑定点击事件，根据主导航菜单项的点击动态显示对应的二级导航栏（如 prognosisnav、roosternav），并解决因依赖 `asp-*` 属性导致 dom 查询失败的问题。

在 ASP.NET Core MVC 中，asp-controller、asp-action 等 Tag Helper 属性仅在服务端渲染时起作用，最终生成到浏览器中的 HTML 不包含这些属性——它们会被编译为标准的 href 链接（例如 <a href="/Prognosis"></a>）。因此，使用 document.querySelector('a[asp-controller="Prognosis"]') 在客户端 JavaScript 中永远返回 null，导致事件监听器无法绑定，导航栏自然无法切换。

✅ 正确做法是：为关键链接显式添加语义化 id 属性，并在 JavaScript 中通过 getElementById 精准获取元素。

✅ 修改 HTML：为导航链接添加唯一 ID

在主导航中，为需要触发二级导航的 <a></a> 标签添加 id：

<!-- 主导航中 -->

Prognosis

Planning

同时确保两个二级导航已存在且默认隐藏（推荐用 CSS 类替代内联 style，更易维护）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

<!-- 二级导航：Prognosis -->
<nav class="navbar navbar-expand-md d-none" id="PrognosisNav"><ul class="navbar-nav">
<li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Prognosis" asp-action="Index">Prognose</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="ExpectationLoad" asp-action="Index">Klanten & Collie beheren</a>
        </li>
        <!-- 其他项... -->
    </ul></nav><!-- 二级导航：Rooster --><nav class="navbar navbar-expand-md d-none" id="RoosterNav"><ul class="navbar-nav">
<li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Rooster" asp-action="">Rooster overzicht</a>
        </li>
        <!-- 其他项... -->
    </ul></nav>

? 提示：Bootstrap 5+ 提供了 d-none / d-block 工具类，比 style="display:none" 更符合框架规范，也便于后续响应式控制。

✅ 编写健壮的 JavaScript 初始化逻辑

将以下脚本置于页面底部（或包裹在 DOMContentLoaded 中），确保 DOM 已就绪：

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 获取 DOM 元素（使用 id，可靠！）
        const prognosisLink = document.getElementById('prognosis-main-link');
        const roosterLink = document.getElementById('rooster-main-link');
        const prognosisNav = document.getElementById('PrognosisNav');
        const roosterNav = document.getElementById('RoosterNav');

        // 安全检查：防止元素不存在时报错
        if (!prognosisLink || !roosterLink || !prognosisNav || !roosterNav) {
            console.warn('⚠️ 关键导航元素未找到，请检查 ID 是否匹配');
            return;
        }

        // 点击 Prognosis 主链接 → 显示 PrognosisNav，隐藏 RoosterNav
        prognosisLink.addEventListener('click', function (e) {
            e.preventDefault();
            prognosisNav.classList.remove('d-none');
            prognosisNav.classList.add('d-flex'); // 或保持 block，视布局需求而定
            roosterNav.classList.add('d-none');
        });

        // 点击 Planning 主链接 → 显示 RoosterNav，隐藏 PrognosisNav
        roosterLink.addEventListener('click', function (e) {
            e.preventDefault();
            roosterNav.classList.remove('d-none');
            roosterNav.classList.add('d-flex');
            prognosisNav.classList.add('d-none');
        });

        // ✅ 进阶建议：初始化时可默认显示首页对应导航（如 PrognosisNav）
        // prognosisNav.classList.remove('d-none');
    });
</script>

⚠️ 注意事项与最佳实践

避免重复绑定：若页面支持局部刷新（如 AJAX 导航），需在每次内容更新后重新初始化事件，或改用事件委托（document.addEventListener('click', ...) + event.target.matches()）。
SEO 与可访问性：二级导航应始终存在于 HTML 中（而非动态 innerHTML 注入），确保搜索引擎和屏幕阅读器可识别；仅控制其可见性。
样式兼容性：navbar-expand-md 要求父容器具备足够宽度，若在小屏下折叠，建议添加 navbar-dark bg-light 等基础类保证视觉一致性。
服务端跳转场景：当前方案适用于单页体验增强（SPAs-like）。若用户直接访问 /Prognosis，建议在 _Layout.cshtml 中通过 ViewBag 或 ViewData 传参，服务端渲染时即激活对应导航，实现 SSR 友好。