#html #css #twitter-bootstrap #bootstrap-4 #accordion
#HTML #css #twitter-bootstrap #bootstrap-4 #аккордеон
Вопрос:
Я использовал это, чтобы я мог развернуть и свернуть 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>
Вот исходный код отображаемого head.
<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'?'amp;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" />
Комментарии:
1. пожалуйста, создайте фрагмент кода или ссылку jsfiddle. спасибо
2. ваш код работает нормально, проверьте эту скрипку или вы можете показать свой внутренний html-тег head
3. возможно, проблема с загрузкой, попробуйте использовать bootstrap CDN и new прочитать новую документацию
4. @JohnnyShallow проверьте эту ссылку используйте ссылку js и css как есть вместо ваших js и css, которые были прокомментированы.
5. Я сделал, все еще не работает
Ответ №1:
Вы добавляете дополнительный data-parent="#accordion" атрибут в <div id="collapseOne" class="collapse" aria-labelledby="headingOne"> строку. Я только что удалил этот атрибут в приведенном ниже фрагменте кода. Я надеюсь, что это поможет вам. Спасибо
<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> Ответ №2:
Вероятно, вы пытаетесь выполнить метод до того, как DOM станет безопасным для манипулирования. Основная проблема заключается в том, что вы поместили все теги вашего скрипта в head тег, а не после основного содержимого. Попробуйте обернуть свой вызов следующим:
$(function() {
// Handler for .ready() called.
})
Ссылка: https://api.jquery.com/ready /
Не имеет отношения к проблеме, но некоторые отзывы были бы направлены на уменьшение количества ресурсов, запрашиваемых на странице, путем их объединения. Это может оказать значительное влияние на время загрузки для конечного пользователя.
Комментарии:
1. какие скрипты я должен поместить после тега body?
2. Все скрипты, если иное не рекомендовано поставщиком, таким как Google Analytics, должны располагаться в конце основного содержимого (не тега body).