Source

Vervolgkeuzelijsten

Schakel contextuele overlays in voor het weergeven van lijsten met links en meer met de Bootstrap dropdown-plug-in.

Overzicht

Dropdowns zijn schakelbare, contextuele overlays voor het weergeven van lijsten met links en meer. Ze zijn interactief gemaakt met de meegeleverde Bootstrap dropdown JavaScript-plug-in. Ze worden geschakeld door te klikken, niet door te zweven; dit is een bewuste ontwerpbeslissing.

Dropdowns zijn gebouwd op een externe bibliotheek, Popper.js , die dynamische positionering en viewport-detectie biedt. Zorg ervoor dat u popper.min.js opneemt vóór Bootstrap's JavaScript of gebruik bootstrap.bundle.min.js/ bootstrap.bundle.jsdat Popper.js bevat. Popper.js wordt niet gebruikt om dropdowns in navigatiebalken te plaatsen, aangezien dynamische positionering niet vereist is.

Als u ons JavaScript vanaf de bron bouwt, isutil.js .

Toegankelijkheid

De WAI ARIA - standaard definieert een echte role="menu"widget , maar dit is specifiek voor toepassingsachtige menu's die acties of functies activeren. ARIA -menu's kunnen alleen menu-items, menu-items met selectievakjes, menu-items met keuzerondjes, groepen met keuzerondjes en submenu's bevatten.

De vervolgkeuzelijsten van Bootstrap zijn daarentegen zo ontworpen dat ze generiek zijn en toepasbaar op verschillende situaties en opmaakstructuren. Het is bijvoorbeeld mogelijk om dropdowns te maken die extra invoer en formulierbesturingselementen bevatten, zoals zoekvelden of inlogformulieren. Om deze reden verwacht Bootstrap geen van de roleen aria-attributen die vereist zijn voor echte ARIA- menu's (en voegt het ook niet automatisch toe). Auteurs zullen deze meer specifieke attributen zelf moeten opnemen.

Bootstrap voegt echter ingebouwde ondersteuning toe voor de meeste standaard toetsenbordmenu-interacties, zoals de mogelijkheid om door afzonderlijke .dropdown-itemelementen te bladeren met behulp van de cursortoetsen en het menu te sluiten met de ESCtoets.

Voorbeelden

Wikkel de schakelaar van de vervolgkeuzelijst (uw knop of link) en het vervolgkeuzemenu in .dropdown, of een ander element dat declareert position: relative;. Dropdowns kunnen worden geactiveerd vanuit <a>of <button>elementen om beter aan uw potentiële behoeften te voldoen.

Dropdownmenu's met één knop

Elke single .btnkan worden omgezet in een vervolgkeuzeknop met enkele opmaakwijzigingen. Hier leest u hoe u ze aan het werk kunt zetten met beide <button>elementen:

Actie Nog een actie Hier nog iets 
<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>

En met <a>elementen:

Actie Nog een actie Hier nog iets 
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>

Het beste is dat je dit ook met elke knopvariant kunt doen:

Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Vervolgkeuzemenu's voor splitsen

Maak op dezelfde manier vervolgkeuzemenu's voor gesplitste knoppen met vrijwel dezelfde markeringen als vervolgkeuzelijsten met één knop, maar met de toevoeging van .dropdown-toggle-splitvoor de juiste afstand rond het dropdown-caret.

We gebruiken deze extra klasse om de horizontale lijn paddingaan weerszijden van het dakje met 25% te verminderen en margin-leftde toegevoegde voor normale vervolgkeuzelijsten voor knoppen te verwijderen. Die extra veranderingen houden het caret gecentreerd in de split-knop en zorgen voor een meer geschikt formaat hitgebied naast de hoofdknop.

Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link 
<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Maatvoering

Dropdownmenu's voor knoppen werken met knoppen van alle formaten, inclusief standaard- en gesplitste vervolgkeuzeknoppen.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Dropup-variatie

Activeer vervolgkeuzemenu's boven elementen door toe te voegen .dropupaan het bovenliggende element.

Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright-variatie

Activeer vervolgkeuzemenu's rechts van de elementen door toe te voegen .droprightaan het bovenliggende element.

Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft-variatie

Activeer vervolgkeuzemenu's aan de linkerkant van de elementen door toe te voegen .dropleftaan het bovenliggende element.

Actie Nog een actie Hier nog iets
Gescheiden link
Actie Nog een actie Hier nog iets
Gescheiden link 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Historisch gezien moest de inhoud van het dropdownmenu links zijn, maar dat is niet langer het geval met v4. Nu kunt u optioneel <button>elementen in uw vervolgkeuzelijsten gebruiken in plaats van alleen <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Standaard wordt een vervolgkeuzemenu automatisch 100% vanaf de bovenkant en langs de linkerkant van het bovenliggende menu geplaatst. Voeg toe .dropdown-menu-rightaan een .dropdown-menuom het vervolgkeuzemenu rechts uit te lijnen.

Kop op! Dropdowns worden gepositioneerd dankzij Popper.js (behalve wanneer ze in een navigatiebalk staan).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Voeg een koptekst toe om secties van acties in een vervolgkeuzemenu te labelen.

Dropdown-koptekst
Actie Nog een actie 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Scheid groepen gerelateerde menu-items met een scheidingslijn.

Actie Nog een actie Hier nog iets
Gescheiden link 
<div class="dropdown-menu">
  <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 class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Plaats een formulier in een vervolgkeuzemenu, of maak er een vervolgkeuzemenu van, en gebruik marge- of opvulhulpprogramma's om het de gewenste negatieve ruimte te geven.

Nieuw hier? Aanmelden Wachtwoord vergeten? 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Actieve menu-items

Voeg toe .activeaan items in de vervolgkeuzelijst om ze als actief te stylen .

Reguliere link Actieve link Nog een link 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Uitgeschakelde menu-items

Voeg toe .disabledaan items in de vervolgkeuzelijst om ze als uitgeschakeld te stylen .

Gewone link Uitgeschakelde link Nog een link 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Gebruik

Via gegevensattributen of JavaScript schakelt de vervolgkeuzeplug-in verborgen inhoud (vervolgkeuzemenu's) door de .showklasse op het bovenliggende lijstitem te schakelen. Er data-toggle="dropdown"wordt vertrouwd op het kenmerk voor het sluiten van vervolgkeuzemenu's op toepassingsniveau, dus het is een goed idee om het altijd te gebruiken.

Op apparaten met aanraakbediening voegt het openen van een vervolgkeuzelijst lege ( $.noop) mouseoverhandlers toe aan de directe onderliggende elementen van het <body>element. Deze weliswaar lelijke hack is nodig om een ​​gril in de gebeurtenisdelegatie van iOS te omzeilen , die anders zou voorkomen dat een tik ergens buiten de vervolgkeuzelijst de code activeert die de vervolgkeuzelijst sluit. Zodra de vervolgkeuzelijst is gesloten, worden deze extra lege mouseoverhandlers verwijderd.

Via gegevensattributen

Voeg toe data-toggle="dropdown"aan een link of knop om een ​​vervolgkeuzelijst in te schakelen.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Via JavaScript

Roep de vervolgkeuzelijsten op via JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"nog steeds vereist

Ongeacht of u uw vervolgkeuzelijst via JavaScript oproept of in plaats daarvan de data-api gebruikt, data-toggle="dropdown"moet altijd aanwezig zijn op het trigger-element van de vervolgkeuzelijst.

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-, zoals in data-offset="".

Naam Type Standaard Beschrijving
offset nummer | tekenreeks | functie 0 Offset van de vervolgkeuzelijst ten opzichte van het doel. Raadpleeg voor meer informatie de offset -documenten van Popper.js .
omdraaien booleaans WAAR Laat Dropdown omdraaien in geval van overlapping op het referentie-element. Raadpleeg de flip-docs van Popper.js voor meer informatie .
grens tekenreeks | element 'scrollOuder' Overloopbeperkingsgrens van het vervolgkeuzemenu. Accepteert de waarden van 'viewport', 'window', 'scrollParent'of een HTMLElement-referentie (alleen JavaScript). Raadpleeg voor meer informatie de preventOverflow- documenten van Popper.js .

Let op wanneer boundaryis ingesteld op een andere waarde dan 'scrollParent', wordt de stijl position: statictoegepast op de .dropdowncontainer.

Methoden:

Methode Beschrijving
$().dropdown('toggle') Schakelt het vervolgkeuzemenu van een bepaalde navigatiebalk of navigatie met tabbladen in.
$().dropdown('update') Werkt de positie van de vervolgkeuzelijst van een element bij.
$().dropdown('dispose') Vernietigt de vervolgkeuzelijst van een element.

Evenementen

Alle dropdown-gebeurtenissen worden geactiveerd op het .dropdown-menubovenliggende element 's en hebben een relatedTargeteigenschap, waarvan de waarde het toggle-ankerelement is.

Evenement Beschrijving
show.bs.dropdown Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de methode show instance wordt aangeroepen.
shown.bs.dropdown Deze gebeurtenis wordt geactiveerd wanneer de vervolgkeuzelijst zichtbaar is gemaakt voor de gebruiker (wacht op CSS-overgangen om te voltooien).
hide.bs.dropdown Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de methode hide instance is aangeroepen.
hidden.bs.dropdown Deze gebeurtenis wordt geactiveerd wanneer de vervolgkeuzelijst is verborgen voor de gebruiker (wacht op CSS-overgangen om te voltooien). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})