为什么手风琴在点击时不会展开或折叠？
Why accordion is not expanding or collapsing upon clicking?
我已经使用了它，所以我可以在单击 + 号时展开和折叠 div，但它没有。它保持僵硬，不会膨胀或塌陷。我尝试添加和删除每个不需要的脚本，但仍然不起作用。
控制台也有错误：
未捕获类型错误：$(...).slideReveal 不是函数
<div class="card">
<div class="card-header" id="headingOne">
<div class="row" style="margin-top: -15px; height:52px;">
<div class="col-6 pt-3">
<h5 class="font-mobile">Planning Engineer</h5>
</div>
<div class="col-6 pt-3" style="height:auto;">
<h5 class="mb-2 text-right">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5>+</h5>
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="height:auto;">
<h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
<ul class="text-justify ul-xs">
<li>Prepare and update project schedule based on the contract.</li>
<li>Set work program and target milestones for each phase based on the project plan</li>
<li>Monitor critical activities based on the project schedule and advise project management.</li>
<li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
<li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
<li>Maintain and record update of work progress obtained from Project Manager.</li>
<li>Prepares monthly report reflecting work progress summary.</li>
<li>Provide process support to the other engineering disciplines</li>
<li>Provide specialist technical input into team project work</li>
<li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
<li>Prepare and review project proposals, studies, and technical reports</li>
<li>Travel to sites as needed.</li>
</ul>
<h5> As our ideal candidate you will have:</h5>
<ul class="text-justify ul-xs">
<li>Bachelor or higher degree in Engineering</li>
<li>At least 7-8 years of experience in oil and gas sector.</li>
<li>Strong command on MS Project, MS excel and Primavera P6</li>
<li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
<li>Outstanding record of academic achievement.</li>
<li>Ability to work effectively with people at all levels in an organization.</li>
<li>Excellent analytical and quantitative problem-solving skills.</li>
<li>Knowledge of International and Local applicable environmental laws and regulations.</li>
</ul>
</div>
</div>
</div>
</div>
这是渲染头部的源代码。
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Tag Manager -->
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/C5D4D1E9-07CB-5B42-A8D8-EDAC580BC537/main.js" charset="UTF-8"></script><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W9FNBLV');</script>
<!-- End Google Tag Manager -->
<!-- -->
<!-- Document Title-->
<!-- =============================================-->
<!--<title>Velosi | Asset Integrity Ltd.</title>-->
<title>Careers</title>
<!-- -->
<!-- JavaScripts-->
<!-- =============================================-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="/Content/Theme/lib/CustomEase.min.js"></script>
<script src="/Content/Theme/js/config.js"></script>
<script src="/Content/Theme/js/zanimation.js"></script>
<script src="/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="/Content/Theme/js/core.js"></script>
<script src="/Content/Theme/js/main.js"></script>
<!-- DataTable -->
<script src="/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="/Content/Theme/Toaster/toastr.js"></script>
<!-- Favicons-->
<!-- =============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="/Content/Theme/images/favicons/favicon.ico">
<link rel="mask-icon" href="/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
<link href="/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Template specific stylesheets-->
<link href="/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="/Content/Theme/css/style.css" rel="stylesheet">
<link href="/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
更新：我按照这个顺序使用了它，但仍然没有用。
@*<script src="~/Scripts/jquery-3.3.1.min.js"></script>*@
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/External/js/modernizr.min.js"></script>
@*<script src="~/Content/External/js/popper.min.js"></script>*@
@*<script src="~/Scripts/bootstrap.min.js"></script>*@
<script src="~/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="~/Content/Theme/lib/CustomEase.min.js"></script>
<script src="~/Content/Theme/js/config.js"></script>
<script src="~/Content/Theme/js/zanimation.js"></script>
<script src="~/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="~/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="~/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="~/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="~/Content/Theme/js/core.js"></script>
<script src="~/Content/Theme/js/main.js"></script>
<script src="~/Content/External/js/jquery.slidereveal.min.js"></script>
<!-- DataTable -->
<script src="~/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="~/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="~/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="~/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="~/Content/Theme/Toaster/toastr.js"></script>
@RenderSection("scripts", required: false)
<!-- Favicons-->
<!-- =============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="~/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="~/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="~/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="~/Content/Theme/images/favicons/favicon.ico">
@*<link rel="manifest" href="~/Content/Theme/images/favicons/manifest.json">*@
<link rel="mask-icon" href="~/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="~/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
@*<link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">*@
<!-- Template specific stylesheets-->
<link href="~/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
<link href="~/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
@*<link href="~/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">*@
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="~/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="~/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="~/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="~/Content/Theme/css/style.css" rel="stylesheet">
<link href="~/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="~/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="~/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
您可能正试图在 DOM 可以安全操作之前执行该方法。潜在的问题是您已将所有脚本标签放在 head 标签中，而不是在正文内容之后。尝试用以下方式包装您的电话：
$(function() {
// Handler for .ready() called.
})
参考：https://api.jquery.com/ready/
与问题无关，但一些反馈是通过捆绑资源来减少页面上请求的资源数量。这会对最终用户的加载时间产生重大影响。
您在 <div id="collapseOne" class="collapse" aria-labelledby="headingOne"> 行中添加了额外的 data-parent="#accordion" 属性。我刚刚在下面的代码片段中删除了这个属性。我希望它能帮助你。谢谢
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-header" id="headingOne">
<div class="row" style="margin-top: -15px; height:52px;">
<div class="col-6 pt-3">
<h5 class="font-mobile">Planning Engineer</h5>
</div>
<div class="col-6 pt-3" style="height:auto;">
<h5 class="mb-2 text-right">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5>+</h5>
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" style="height:auto;">
<h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
<ul class="text-justify ul-xs">
<li>Prepare and update project schedule based on the contract.</li>
<li>Set work program and target milestones for each phase based on the project plan</li>
<li>Monitor critical activities based on the project schedule and advise project management.</li>
<li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
<li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
<li>Maintain and record update of work progress obtained from Project Manager.</li>
<li>Prepares monthly report reflecting work progress summary.</li>
<li>Provide process support to the other engineering disciplines</li>
<li>Provide specialist technical input into team project work</li>
<li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
<li>Prepare and review project proposals, studies, and technical reports</li>
<li>Travel to sites as needed.</li>
</ul>
<h5> As our ideal candidate you will have:</h5>
<ul class="text-justify ul-xs">
<li>Bachelor or higher degree in Engineering</li>
<li>At least 7-8 years of experience in oil and gas sector.</li>
<li>Strong command on MS Project, MS excel and Primavera P6</li>
<li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
<li>Outstanding record of academic achievement.</li>
<li>Ability to work effectively with people at all levels in an organization.</li>
<li>Excellent analytical and quantitative problem-solving skills.</li>
<li>Knowledge of International and Local applicable environmental laws and regulations.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
我已经使用了它，所以我可以在单击 + 号时展开和折叠 div，但它没有。它保持僵硬，不会膨胀或塌陷。我尝试添加和删除每个不需要的脚本，但仍然不起作用。 控制台也有错误：
未捕获类型错误：$(...).slideReveal 不是函数
<div class="card">
<div class="card-header" id="headingOne">
<div class="row" style="margin-top: -15px; height:52px;">
<div class="col-6 pt-3">
<h5 class="font-mobile">Planning Engineer</h5>
</div>
<div class="col-6 pt-3" style="height:auto;">
<h5 class="mb-2 text-right">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5>+</h5>
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="height:auto;">
<h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
<ul class="text-justify ul-xs">
<li>Prepare and update project schedule based on the contract.</li>
<li>Set work program and target milestones for each phase based on the project plan</li>
<li>Monitor critical activities based on the project schedule and advise project management.</li>
<li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
<li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
<li>Maintain and record update of work progress obtained from Project Manager.</li>
<li>Prepares monthly report reflecting work progress summary.</li>
<li>Provide process support to the other engineering disciplines</li>
<li>Provide specialist technical input into team project work</li>
<li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
<li>Prepare and review project proposals, studies, and technical reports</li>
<li>Travel to sites as needed.</li>
</ul>
<h5> As our ideal candidate you will have:</h5>
<ul class="text-justify ul-xs">
<li>Bachelor or higher degree in Engineering</li>
<li>At least 7-8 years of experience in oil and gas sector.</li>
<li>Strong command on MS Project, MS excel and Primavera P6</li>
<li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
<li>Outstanding record of academic achievement.</li>
<li>Ability to work effectively with people at all levels in an organization.</li>
<li>Excellent analytical and quantitative problem-solving skills.</li>
<li>Knowledge of International and Local applicable environmental laws and regulations.</li>
</ul>
</div>
</div>
</div>
</div>
这是渲染头部的源代码。
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Tag Manager -->
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/C5D4D1E9-07CB-5B42-A8D8-EDAC580BC537/main.js" charset="UTF-8"></script><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W9FNBLV');</script>
<!-- End Google Tag Manager -->
<!-- -->
<!-- Document Title-->
<!-- =============================================-->
<!--<title>Velosi | Asset Integrity Ltd.</title>-->
<title>Careers</title>
<!-- -->
<!-- JavaScripts-->
<!-- =============================================-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="/Content/Theme/lib/CustomEase.min.js"></script>
<script src="/Content/Theme/js/config.js"></script>
<script src="/Content/Theme/js/zanimation.js"></script>
<script src="/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="/Content/Theme/js/core.js"></script>
<script src="/Content/Theme/js/main.js"></script>
<!-- DataTable -->
<script src="/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="/Content/Theme/Toaster/toastr.js"></script>
<!-- Favicons-->
<!-- =============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="/Content/Theme/images/favicons/favicon.ico">
<link rel="mask-icon" href="/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
<link href="/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Template specific stylesheets-->
<link href="/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="/Content/Theme/css/style.css" rel="stylesheet">
<link href="/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
更新：我按照这个顺序使用了它，但仍然没有用。
@*<script src="~/Scripts/jquery-3.3.1.min.js"></script>*@
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/External/js/modernizr.min.js"></script>
@*<script src="~/Content/External/js/popper.min.js"></script>*@
@*<script src="~/Scripts/bootstrap.min.js"></script>*@
<script src="~/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="~/Content/Theme/lib/CustomEase.min.js"></script>
<script src="~/Content/Theme/js/config.js"></script>
<script src="~/Content/Theme/js/zanimation.js"></script>
<script src="~/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="~/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="~/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="~/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="~/Content/Theme/js/core.js"></script>
<script src="~/Content/Theme/js/main.js"></script>
<script src="~/Content/External/js/jquery.slidereveal.min.js"></script>
<!-- DataTable -->
<script src="~/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="~/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="~/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="~/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="~/Content/Theme/Toaster/toastr.js"></script>
@RenderSection("scripts", required: false)
<!-- Favicons-->
<!-- =============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="~/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="~/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="~/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="~/Content/Theme/images/favicons/favicon.ico">
@*<link rel="manifest" href="~/Content/Theme/images/favicons/manifest.json">*@
<link rel="mask-icon" href="~/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="~/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
@*<link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">*@
<!-- Template specific stylesheets-->
<link href="~/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
<link href="~/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
@*<link href="~/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">*@
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="~/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="~/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="~/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="~/Content/Theme/css/style.css" rel="stylesheet">
<link href="~/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="~/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="~/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
您可能正试图在 DOM 可以安全操作之前执行该方法。潜在的问题是您已将所有脚本标签放在 head 标签中，而不是在正文内容之后。尝试用以下方式包装您的电话：
$(function() {
// Handler for .ready() called.
})
参考：https://api.jquery.com/ready/
与问题无关，但一些反馈是通过捆绑资源来减少页面上请求的资源数量。这会对最终用户的加载时间产生重大影响。
您在 <div id="collapseOne" class="collapse" aria-labelledby="headingOne"> 行中添加了额外的 data-parent="#accordion" 属性。我刚刚在下面的代码片段中删除了这个属性。我希望它能帮助你。谢谢
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-header" id="headingOne">
<div class="row" style="margin-top: -15px; height:52px;">
<div class="col-6 pt-3">
<h5 class="font-mobile">Planning Engineer</h5>
</div>
<div class="col-6 pt-3" style="height:auto;">
<h5 class="mb-2 text-right">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5>+</h5>
</button>
</h5>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" style="height:auto;">
<h5 class="overflow-hidden mt-xs-2">Job Description:</h5>
<ul class="text-justify ul-xs">
<li>Prepare and update project schedule based on the contract.</li>
<li>Set work program and target milestones for each phase based on the project plan</li>
<li>Monitor critical activities based on the project schedule and advise project management.</li>
<li>Prepares and submit updated work program and cash flow curve showing actual progress and identify areas of weakness and establishes means and methods for recovery, if any, as well as new critical activities.</li>
<li>Monitor day to day work progress and prepare the weekly and monthly program and report.</li>
<li>Maintain and record update of work progress obtained from Project Manager.</li>
<li>Prepares monthly report reflecting work progress summary.</li>
<li>Provide process support to the other engineering disciplines</li>
<li>Provide specialist technical input into team project work</li>
<li>Develop or bring forward, as appropriate, industry best practices and new technologies.</li>
<li>Prepare and review project proposals, studies, and technical reports</li>
<li>Travel to sites as needed.</li>
</ul>
<h5> As our ideal candidate you will have:</h5>
<ul class="text-justify ul-xs">
<li>Bachelor or higher degree in Engineering</li>
<li>At least 7-8 years of experience in oil and gas sector.</li>
<li>Strong command on MS Project, MS excel and Primavera P6</li>
<li>Ability to communicate complex ideas effectively – both verbally and in writing – in English.</li>
<li>Outstanding record of academic achievement.</li>
<li>Ability to work effectively with people at all levels in an organization.</li>
<li>Excellent analytical and quantitative problem-solving skills.</li>
<li>Knowledge of International and Local applicable environmental laws and regulations.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>