Ik heb het officiële Bootstrap 4-voorbeeld gekopieerd voor vervolgkeuzemenu’s, maar het werkt niet, dat wil zeggen dat er niets wordt neergezet.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
Antwoord 1, autoriteit 100%
Bewerken: als iemand anders dit probleem heeft, denk ik dat de oplossing voor OP was dat hij popper.jsniet had geïmporteerd.
Controleer of jQuery en alle relevante Bootstrap-componenten aanwezig zijn. Controleer ook de console en zorg ervoor dat er geen fouten zijn.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
<-- Always remember to call the above files first before calling the bootstrap.min.js file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>2, Autoriteit 18%
Probeer deze regels aan het einde van het bestand
toe te voegen
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
3, Autoriteit 8%
Voeg deze code toe aan uw jQuery
$('.dropdown').click(function(){
$('.dropdown-menu').toggleClass('show');
});
4, Autoriteit 5%
Ervan uitgaande dat Bootstrap- en Popper-bibliotheken zijn geïnstalleerd met Nuget-pakketbeheer, voor een webtoepassing met Visual Studio, in het hoofdpaginabestand (Site.Master), direct onder waar de body-tag begint, voeg de verwijzing naar popper.min.js toe door te typen:
<script src="Scripts/umd/popper.min.js"></script>
Hier is een afbeelding om de locatie beter weer te geven:
Merk op dat de referentie van de toe te voegen popper-bibliotheek die in de map umdmoet zijn en niet die buiten de map Scripts.
Dit zou het probleem moeten oplossen.
Antwoord 5, autoriteit 4%
voeg ze toe aan deze bestelling
dit zal werken
ik weet niet waarom 😀
<!-- jQuery -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Popper -->
<script src="js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
Antwoord 6, autoriteit 3%
Het is een probleem met het bestand popper.js. Wat ik op de officiële site vond, was dat bundelbestanden popper zelf bevatten, maar geen jQuery. Ik heb het kunnen repareren door een link naar deze bestanden toe te voegen:
bootstrap.bundle.js
bootstrap.bundle.min.js
Ik heb popper.jsechter verwijderd omdat het in het bundelbestand zit.
Antwoord 7
Zorg ervoor dat u de Bootstrap CSS opneemt via de Bootstrap CDN
of download het en link het lokaal
Antwoord 8
Ik heb NuGet gebruikt om BootStrap 4 te installeren. Ik had ook problemen met het niet weergeven van de vervolgkeuzelijst bij klikken. Het bleef een fout geven in jQuery, gebaseerd op wat de Chrome-console me vertelde.
Ik had oorspronkelijk het volgende
<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />
<%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
Maar ik heb het gewijzigd om in plaats daarvan de gebundelde versie te gebruiken en het begon te werken
<%-- CSS --%>
<link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />
<%-- JS --%>
<script type="text/javascript" src="/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.bundle.min.js"></script>
Antwoord 9
Via JavaScript
Roep de vervolgkeuzelijsten op via JavaScript:
Plak dit is code na bootstrap.min.js
$('.dropdown-toggle').dropdown();
Zorg er ook voor dat u popper.min.jsopneemt vóór bootstrap.min.js
Vervolgkeuzelijsten worden gepositioneerd dankzij Popper.js (behalve wanneer ze in een navigatiebalk staan).
Antwoord 10
Een eenvoudig antwoord is om deze regel te vervangen:
<script type="text/javascript" src="your_directory/bootstrap.min.js"></script>
voor deze andere:
<script type="text/javascript" src="your_directory/bootstrap.bundle.min.js"></script>
11
Ik heb zojuist JQuery’s nieuwste versie gedownload van hun officiële website en vervolgens toegevoegd als een JS-bestand in mijn Projectmap en vervolgens naar mijn HTML-bestand. Daarna werkte het goed voor mij
12
U moet de script bootstrap.js of bootstrap.min.js hebben ingeschakeld. Ik had hetzelfde probleem met Bootstrap 4.5.3 En het menu werkte toen ik een van de bovenstaande scripts heeft ingeschakeld. Het kan ook zijn.
13
Voeg deze regel van code toe aan het einde van het lichaamstag
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>