Ik probeer een samenvouwbare component te maken met Bootstrap. Mijn code is dit
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
</div>Antwoord 1, autoriteit 100%
jQuery is vereist (als je Bootstrap 3 of 4) gebruikt 😉
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- THIS LINE -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
</div>
</body>
</html>Antwoord 2, autoriteit 42%
bootstrap.js gebruikt de jQuery-bibliotheek, dus u moet de jQuery-bibliotheek toevoegen vóór de bootstrap js.
dus voeg de jQuery-bibliotheek toe zoals
Opmerking: houd de volgorde van het js-bestand aan. html-pagina gebruik van boven naar beneden benadering voor compilatie
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
Antwoord 3, autoriteit 28%
Ik werd een uur lang gek… Ik beantwoord deze vraag na 7 jaar, want als je de nieuwe Boosttrap 5gebruikt, zijn de attributen data-bs-toggle, data-bs-parenten data-bs-target, let op de -bs-in het midden.
Antwoord 4, autoriteit 20%
Voeg jQuery toe en zorg ervoor dat er maar één link voor jQuery is, want meerdere werken niet…
Antwoord 5, autoriteit 14%
U hebt jQuery zien zie Bootstrap’s Basic Template
6, Autoriteit 2%
Als u Bootstrap 4.5 Collapse Component gebruikt, gebruikt u deze twee links in het geheel van HTML-tag
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
7
Ik had dit probleem en het probleem was bootstrap.js was niet lading in YII2 Framework.Enst wordt jQuery geladen in Inspect en vervolgens check Bootstrap.js is geladen? Als je een tooltip Popper gebruikt. .js.
8
Nog een goede reden hiervoor is onjuist geformatteerde HTML, zodat de dingen niet goed worden gesloten, of uw ID-tags hebben dingen als volle stops in hen, dat jQuery zal worden.
9
Misschien is de poort van uw mobiele uitzicht niet ingesteld.
Voeg de volgende metatag toe binnen <head></head>om het menu op MOBILES te laten werken.
<meta name=viewport content="width=device-width, initial-scale=1">