Razor页面中JQuery Accordion无法正常工作的技术求助

问题场景 #

花费数小时查阅各类技术资料，仍未解决Razor页面中jQuery Accordion无法正常工作的问题，代码实现如下：

_Layout.cshtml：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="~/script.js"></script>
<script>
    $(function () {
        $("#accordion").accordion();
    });
</script>

具体页面cshtml：

@page
@model CRM.Pages.AdministrationModel
@{}

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

已尝试安装jQuery NuGet包等多种方法，均无效果。

排查与解决步骤 #

• 调整DOM加载顺序
  当前Layout中的初始化脚本可能在页面内容（@RenderBody()输出的元素）之前执行，导致找不到#accordion元素。建议将初始化脚本移到@RenderBody()之后，或者把初始化代码放到具体页面的底部，确保DOM元素已渲染完成。

• 检查版本兼容性与脚本冲突

  1. 打开浏览器控制台（F12），执行$.fn.jquery和$.ui.version，确认jQuery（1.12.4）与jQuery UI（1.12.1）版本匹配且正常加载。
  2. 排查是否有其他版本的jQuery被重复加载（比如NuGet包引入的本地版本和CDN版本冲突），导致$对象被覆盖。
  3. 检查~/script.js中是否存在jQuery.noConflict()这类代码，若有则需改用jQuery("#accordion").accordion()初始化组件。

• 验证资源加载状态
  在浏览器开发者工具的Network标签下，检查所有CSS和JS文件的HTTP状态码是否为200，确保没有加载失败的情况。

• 简化结构测试
  jQuery UI Accordion原生支持<h3>作为标题容器，无需额外嵌套<a>标签，多余的标签可能干扰组件渲染。先简化页面代码测试：

  @page
  @model CRM.Pages.AdministrationModel
  <div id="accordion">
      <h3>First header</h3>
      <div>First content</div>
      <h3>Second header</h3>
      <div>Second content</div>
  </div>
  <script>
      $(function () {
          $("#accordion").accordion();
      });
  </script>
  

  同时暂时移除~/script.js，排查是否是该文件中的代码导致冲突。

• 查看控制台报错信息
  浏览器控制台的报错信息是定位问题的关键，比如$ is not defined（jQuery未加载）、accordion is not a function（jQuery UI未加载或冲突），这些提示能直接指向问题根源。

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