Bootstrap-vervolgkeuzelijst werkt niet

Ik kan de bootstrap-dropdown niet laten werken.
Hier is mijn html voor nav:

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

En hier zijn de scripts:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

Wat doe ik verkeerd? Bedankt voor je antwoorden!


Antwoord 1, autoriteit 100%

Werkende demo: http://codebins.com/bin/4ldqp73

probeer dit

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Antwoord 2, autoriteit 96%

Ik had hetzelfde probleem. Na een paar uur problemen oplossen bleek dat,

Ik had

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

in plaats van,

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

Ik hoop dat dit iemand helpt


Antwoord 3, autoriteit 92%

Ik had hetzelfde probleem toen ik de bootstrap.min.js twee keer toevoegde. Een ervan verwijderd en het begon te werken.


Antwoord 4, autoriteit 98%

Ter info: als u bootstrap.js heeft, moet u geen bootstrap-dropdown.js toevoegen.

Ik ben niet zeker van het resultaat met bootstrap.min.js.


Antwoord 5, autoriteit 100%

Voor je stijl moet je de css-bestanden van bootstrap opnemen, meestal net voor het </head>-element

<link href="css/bootstrap.css" rel="stylesheet">    

Vervolgens moet je de js-bestanden toevoegen. Het wordt aanbevolen om ze aan het einde van het document op te nemen, meestal vóór de </body> zodat pagina’s sneller worden geladen.

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>

Antwoord 6, autoriteit 57%

Voeg de volgende regels toe binnen de body-tags.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>

Antwoord 7, autoriteit 50%

je moet deze bestanden importeren in de <head></head> van je html.

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Antwoord 8, autoriteit 36%

Heb je jquery.js opgenomen?

Vergelijk deze regel code ook met de jouwe:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

Bekijk deze versie die goed werkt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>

Antwoord 9, autoriteit 29%

Zowel bootstrap als jQuery moeten worden opgenomen:

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>
<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

OPMERKING: jquery-x.x.x.min.js versie moet versie 2.x.x zijn !!!


Antwoord 10, autoriteit 29%

Ik heb het bedacht en de eenvoudigste manier om dit te doen, is door het CDN van de bootstrap-link te kopiëren en te plakken die te vinden is in https://www.bootstrapcdn.com/ en de Jquery CDN-scripts die hier https kunnen worden gevonden ://code.jquery.com/ en nadat je de links hebt gekopieerd, plakken de bootstrap-links op de kop van HTML en het JQuery-script plak je in de hoofdtekst van HTML, zoals in het onderstaande voorbeeld:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
      </head>
      <body>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

Voor mij werkt het perfect, ik hoop dat het ook voor jou werkt 🙂


Antwoord 11, autoriteit 29%

Ik heb zojuist een JS deel van bootstrap toegevoegd aan mijn indexpagina, en toen werkte het

Plak dit als je de nieuwste versie van bootstrap gebruikt

<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>

Antwoord 12, autoriteit 14%

Probeer dit in het hoofdgedeelte

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Antwoord 13, autoriteit 14%

Hier wat ik deed is …..

Zojuist bootstrap.min.js uit mijn project verwijderd en bootstrap.js eraan toegevoegd en het begon te werken……..

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));

Antwoord 14, autoriteit 14%

Probeer deze code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <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>
    </div>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Antwoord 15, autoriteit 14%

Kopieer en plak hieronder jQuery <script> en stylesheet <link> in uw <Head> om er zeker van te zijn dat u’ laad alle benodigde bestanden opnieuw.

Het is belangrijk dat uw JQuery .js-bestand boven het .css-stylesheet staat

Plak de volgende regel om te testen

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Het probleem doet zich meestal voor bij het laden van jQuery-script, zorg ervoor dat u
voeg referenties correct toe.

Nu testen

Als het nog steeds niet werkt, kijk dan op de bootstrap-website waar ze een voorbeeldimplementatie hebben.

https://getbootstrap.com/docs/4.3/components/ navbar/#supported-content


Antwoord 16, autoriteit 7%

U moet conflicterende css-bestanden/-eigenschappen controleren, u zou bijvoorbeeld “.nav” aangepaste stijlinhoud elders kunnen hebben, probeer uw eigen css-bestanden uit te schakelen en controleer of dat werkt en controleer vervolgens welk bestand of aangepaste stijl de conflicten veroorzaakt
zorg er ook voor dat u de bootstrap.min.js in uw code opneemt


Antwoord 17, autoriteit 7%

Ik had een soortgelijk probleem, alleen merkte ik op dat ik het bootstrap-script tweemaal had toegevoegd en het tweede bootstrap-script was na boven het jQuery-script.

Oplossing:

  • Zorg ervoor dat bootstrap.min.js en jquery.min.js maar één keer in uw bestand worden opgenomen.
  • Het bootstrap.min.js-script moet worden opgenomen na jquery.min.js

Antwoord 18, autoriteit 7%

Voor de nieuwste Bootstrap heeft u Popper.js

nodig

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Kopieer de link in het gedeelte End of the Body net voor de <body>-tag, in de <Head>-tag.


Antwoord 19, autoriteit 7%

In mijn geval bleek de oorspronkelijke vraag het antwoord. Op de bootstraps-documentatiepagina is er geen melding gemaakt van het gebruik van een script om dropdowns in te schakelen, maar het lijkt nodig te zijn om het te laten functioneren, althans in mijn geval.

Toen ik dit script uit de oorspronkelijke vraag had toegevoegd, begon het op magische wijze te werken.

<script>
 $(document).ready(function(){
    $('.dropdown-toggle').dropdown()
});
</script>

–Bewerken: de hoofdoorzaak had iets te maken met de opmaak van mijn bovenliggende navigatiecontainer, ik blies mijn hele navigatiegedeelte weg en verving het door een voorbeeld van bootstraps en het begon te werken zonder het script. Dus beide oplossingen werken, maar het wegblazen leek de “juiste” manier voor mij omdat het script als een cheat aanvoelde.


Antwoord 20

Ik had hetzelfde probleem waardoor ik hier kwam.

Mijn probleem: ik gebruikte de aanbevolen jQuery 1.12.0-versie als mijn jQuery-scriptbestand.

Oplossing: het jQuery-script vervangen door jQuery 2.2.0-versie.

Dat heeft het voor mij opgelost.


Antwoord 21

Voor mij was het een CORS-probleem. Ik heb crossorigin="anonymous" verwijderd uit mijn tags voor het importeren van scripts en het begon weer te werken.

BTW de nieuwste scripttags, in de juiste volgorde, zijn altijd hier te vinden: https://getbootstrap.com/

Bewerken: blijkbaar zal het toevoegen van defer aan de script-tag ook alle Bootstrap-goodies breken.


Antwoord 22

Kopieer/plak de CSS-link gevolgd door de JS-link van de bootstrap-site hier . Dan zou de vervolgkeuzelijst moeten werken.

Mijn pagina ziet er als volgt uit:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <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>
    <title>Website Title</title>
  </head>
  <body>
    <div id="content" />
    <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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <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="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
</html>

(Navbar van hier)


Antwoord 23

Controleer de popper.js-bibliotheek, want ik had hetzelfde probleem, je kunt bootstrap-, jQuery- en popper-CDN’s vinden voor drop-down op https: //getbootstrap.com/
of kopieer gewoon de volgende scripttags


Antwoord 24

Mijn (zelfde) probleem ontstond toen ik de css- en de bootstrap-versies door elkaar haalde.
Ik gebruikte versie 3 bootstrap.min.js met versie 4.5 bootstrap.min.css

Als je onlangs een heleboel css- en js-bestanden naar je statische map hebt geladen of overschreven, zou dit een goede plek zijn om te beginnen.

Veel succes.


Antwoord 25

Ik had setup met Angular 7, jQuery 3.4.1, Popper 1.12.9 en Bootstrap 4.3.1, niets werkte voor mij totdat ik deze kleine hack in stijlen deed:

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

Html ziet er als volgt uit:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

18 + twenty =

Other episodes