Html 为什么手风琴不会在点击时展开或折叠？_Html_Css_Twitter Bootstrap_Bootstrap 4_Accordion

Html 为什么手风琴不会在点击时展开或折叠？

html css twitter-bootstrap bootstrap-4

Html 为什么手风琴不会在点击时展开或折叠？,html,css,twitter-bootstrap,bootstrap-4,accordion,Html,Css,Twitter Bootstrap,Bootstrap 4,Accordion,我已经使用了它，所以我可以在单击+符号时展开和折叠div，但它没有。它仍然僵硬，不会膨胀或崩溃。我试着添加和删除所有不需要的脚本，但仍然不起作用。控制台也有错误：未捕获类型错误：$（…）。slideReveal不是函数 <div class="card"> <div class="card-header" id="headingOne"> <div class="ro

我已经使用了它，所以我可以在单击+符号时展开和折叠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>

规划工程师 + 职位描述：根据合同编制和更新项目进度计划根据项目计划为每个阶段设定工作计划和目标里程碑根据项目进度监控关键活动，并向项目管理层提供建议编制并提交更新的工作计划和现金流曲线，显示实际进展情况，确定薄弱环节，并确定恢复手段和方法（如有），以及新的关键活动监控日常工作进度，准备每周和每月的计划和报告维护并记录从项目经理处获得的工作进度的更新编制反映工作进度总结的月度报告为其他工程专业提供过程支持为团队项目工作提供专业技术投入酌情开发或提出行业最佳实践和新技术准备和审查项目提案、研究和技术报告根据需要前往现场作为我们的理想候选人，您将拥有：工程专业本科或以上学历至少7-8年石油和天然气行业工作经验精通MS Project、MS excel和Primavera P6 能够用英语有效地沟通复杂的想法，包括口头和书面学业成绩优异能够与组织内各级人员有效合作优秀的分析和定量问题解决能力了解国际和当地适用的环境法律法规
下面是正在呈现的head的源代码

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <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>      <title>Careers</title>    <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>  <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>  <script src="/Content/Theme/select2/dist/js/select2.min.js"></script> <script src="/Content/Theme/Toaster/toastr.js"></script>   <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">     <link href="/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">  <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" />  <link href="/Content/Theme/css/style.css" rel="stylesheet"> <link href="/Content/Theme/css/custom.css" rel="stylesheet">  <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" />  <link href="/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" /> <link href="/Content/Site.css" rel="stylesheet" />

（函数（w，d，s，l，i）{w[l]=w[l]||【】；w[l]。推送（{'gtm.start'： new Date（）.getTime（），事件：'gtm.js'}）；var f=d.getElementsByTagName[0]， j=d.createElement，dl=l！=“数据层”？“&l=”+l:“”；j.async=true；j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl；f.parentNode.insertBefore（j，f）； })（窗口、文档、“脚本”、“数据层”、“GTM-W9FNBLV”）；事业
更新：我在这个序列中使用了它，但仍然不起作用

@*<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>  <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>  <script src="~/Content/Theme/select2/dist/js/select2.min.js"></script> <script src="~/Content/Theme/Toaster/toastr.js"></script> @RenderSection("scripts", required: false)   <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">     @*<link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">*@  <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" />  <link href="~/Content/Theme/css/style.css" rel="stylesheet"> <link href="~/Content/Theme/css/custom.css" rel="stylesheet">  <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" />  <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" />

@**@ @**@ @**@ @RenderSection（“脚本”，必需：false） @**@ @**@ @**@
您可能正在尝试在DOM可以安全操作之前执行该方法。根本的问题是，您已将所有脚本标记放在
头标记中，而不是放在正文内容之后。请尝试用以下方式结束通话： $(function() { // Handler for .ready() called. }) 参考：与问题无关，但有些反馈是通过捆绑资源来减少页面上请求的资源数量。这可能会对最终用户的加载时间产生重大影响。您可能正试图在DOM可以安全操作之前执行该方法。根本的问题是，您已将所有脚本标记放在头标记中，而不是放在正文内容之后。请尝试用以下方式结束通话： $(function() { // Handler for .ready() called. }) 参考：与问题无关，但有些反馈是通过捆绑资源来减少页面上请求的资源数量。这可能会对最终用户的加载时间产生重大影响。在行中添加额外的数据父项=“#accordion” 属性。我刚刚在下面的代码片段中删除了这个属性。我希望它能帮助你。谢谢