Source

Dropdown

Attiva/disattiva le sovrapposizioni contestuali per la visualizzazione di elenchi di collegamenti e altro con il plug-in a discesa Bootstrap.

Panoramica

I menu a discesa sono sovrapposizioni contestuali attivabili per visualizzare elenchi di collegamenti e altro. Sono resi interattivi con il plug-in JavaScript a discesa Bootstrap incluso. Vengono attivati facendo clic, non passando con il mouse; questa è una decisione progettuale intenzionale .

I menu a discesa sono basati su una libreria di terze parti, Popper.js , che fornisce posizionamento dinamico e rilevamento del viewport. Assicurati di includere popper.min.js prima di JavaScript di Bootstrap o usa bootstrap.bundle.min.js/ bootstrap.bundle.jsche contiene Popper.js. Popper.js non viene utilizzato per posizionare i menu a discesa nelle barre di navigazione, anche se non è richiesto il posizionamento dinamico.

Se stai creando il nostro JavaScript dal sorgente, richiedeutil.js .

Accessibilità

Lo standard WAI ARIA definisce un vero e proprio role="menu"widget , ma questo è specifico per i menu simili a applicazioni che attivano azioni o funzioni. I menu ARIA possono contenere solo voci di menu, voci di menu checkbox, voci di menu di pulsanti di opzione, gruppi di pulsanti di opzione e sottomenu.

I menu a discesa di Bootstrap, d'altra parte, sono progettati per essere generici e applicabili a una varietà di situazioni e strutture di markup. Ad esempio, è possibile creare menu a discesa che contengono input aggiuntivi e controlli dei moduli, come campi di ricerca o moduli di accesso. Per questo motivo, Bootstrap non si aspetta (né aggiunge automaticamente) nessuno degli attributi rolee richiesti per i veri menu ARIA . Gli autori dovranno includere essi stessi questi attributi più specifici.aria-

Tuttavia, Bootstrap aggiunge il supporto integrato per la maggior parte delle interazioni standard del menu della tastiera, come la possibilità di spostarsi tra i singoli .dropdown-itemelementi utilizzando i tasti cursore e chiudere il menu con il ESCtasto.

Esempi

Avvolgi l'interruttore del menu a discesa (il tuo pulsante o collegamento) e il menu a discesa all'interno di .dropdown, o un altro elemento che dichiara position: relative;. I menu a discesa possono essere attivati da <a>o <button>elementi per soddisfare meglio le tue potenziali esigenze.

Pulsante singolo

Qualsiasi singolo .btnpuò essere trasformato in un interruttore a discesa con alcune modifiche al markup. Ecco come puoi metterli in funzione con entrambi <button>gli elementi:

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

E con <a>elementi:

<div class="dropdown">
  <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>

La parte migliore è che puoi farlo anche con qualsiasi variante di pulsante:

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

Pulsante Dividi

Allo stesso modo, crea menu a discesa dei pulsanti divisi con praticamente lo stesso markup dei menu a discesa dei pulsanti singoli, ma con l'aggiunta di .dropdown-toggle-splituna spaziatura adeguata attorno al cursore a discesa.

Usiamo questa classe extra per ridurre l'orizzontale paddingsu entrambi i lati del cursore del 25% e rimuovere margin-leftquello aggiunto per i normali menu a discesa dei pulsanti. Queste modifiche extra mantengono il cursore centrato nel pulsante di divisione e forniscono un'area di successo di dimensioni più appropriate accanto al pulsante principale.

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

Dimensionamento

I menu a discesa dei pulsanti funzionano con pulsanti di tutte le dimensioni, inclusi i pulsanti a discesa predefiniti e divisi.

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

Indicazioni

Ritiro

Attiva i menu a discesa sopra gli elementi aggiungendoli .dropupall'elemento padre.

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

Attiva i menu a discesa a destra degli elementi aggiungendoli .droprightall'elemento padre.

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

Attiva i menu a discesa a sinistra degli elementi aggiungendoli .dropleftall'elemento padre.

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

Storicamente i contenuti del menu a discesa dovevano essere collegamenti, ma non è più il caso della v4. Ora puoi opzionalmente utilizzare <button>elementi nei tuoi menu a discesa anziché solo <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>

Puoi anche creare elementi a discesa non interattivi con .dropdown-item-text. Sentiti libero di personalizzare ulteriormente lo stile con CSS o utilità di testo personalizzati.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

Attivo

Aggiungi .activeagli elementi nel menu a discesa per impostarli come attivi .

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

Disabilitato

Aggiungi .disabledagli elementi nel menu a discesa per impostarli come disabilitati .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Per impostazione predefinita, un menu a discesa viene posizionato automaticamente al 100% dall'alto e lungo il lato sinistro del suo genitore. Aggiungi .dropdown-menu-righta a .dropdown-menuper allineare a destra il menu a discesa.

Dritta! I menu a discesa sono posizionati grazie a Popper.js (tranne quando sono contenuti in una barra di navigazione).

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

Allineamento reattivo

Se desideri utilizzare l'allineamento reattivo, disabilita il posizionamento dinamico aggiungendo l' data-display="static"attributo e utilizza le classi di variazione reattive.

Per allineare a destra il menu a discesa con il punto di interruzione specificato o più grande, aggiungi .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

Per allineare a sinistra il menu a discesa con il punto di interruzione specificato o più grande, aggiungi .dropdown-menu-righte .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

Nota che non è necessario aggiungere un data-display="static"attributo ai pulsanti a discesa nelle barre di navigazione, poiché Popper.js non viene utilizzato nelle barre di navigazione.

Intestazioni

Aggiungi un'intestazione per etichettare sezioni di azioni in qualsiasi menu a discesa.

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

Divisori

Separare i gruppi di voci di menu correlate con un divisore.

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

Testo

Posiziona qualsiasi testo a mano libera all'interno di un menu a discesa con testo e utilizza le utilità di spaziatura . Tieni presente che probabilmente avrai bisogno di stili di ridimensionamento aggiuntivi per limitare la larghezza del menu.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Le forme

Inserisci un modulo all'interno di un menu a discesa o trasformalo in un menu a discesa e utilizza le utilità di margine o riempimento per dargli lo spazio negativo necessario.

<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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Utilizzare data-offseto data-referenceper modificare la posizione del menu a discesa.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</div>

Utilizzo

Tramite attributi di dati o JavaScript, il plug-in a discesa attiva o disattiva il contenuto nascosto (menu a discesa) attivando la .showclasse sull'elemento dell'elenco padre. L' data-toggle="dropdown"attributo viene utilizzato per la chiusura dei menu a discesa a livello di applicazione, quindi è una buona idea utilizzarlo sempre.

Sui dispositivi abilitati al tocco, l'apertura di un menu a discesa aggiunge gestori vuoti ( $.noop) mouseoverai figli immediati <body>dell'elemento. Questo hack certamente brutto è necessario per aggirare una stranezza nella delega dell'evento di iOS , che altrimenti impedirebbe a un tocco in qualsiasi punto al di fuori del menu a discesa di attivare il codice che chiude il menu a discesa. Una volta chiuso il menu a discesa, questi mouseovergestori vuoti aggiuntivi vengono rimossi.

Tramite attributi di dati

Aggiungi data-toggle="dropdown"a un link o un pulsante per attivare un menu a discesa.

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

Tramite JavaScript

Chiama i menu a discesa tramite JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`ancora richiesto

Indipendentemente dal fatto che chiami il menu a discesa tramite JavaScript o utilizzi invece data-api, data-toggle="dropdown"è sempre necessario essere presente sull'elemento trigger del menu a discesa.

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset="".

Nome	Tipo	Predefinito	Descrizione
compensare	numero \| stringa \| funzione	0	Offset del menu a discesa rispetto al suo target. Per ulteriori informazioni, fare riferimento ai documenti di offset di Popper.js .
Flip	booleano	VERO	Consenti a Dropdown di capovolgersi in caso di sovrapposizione sull'elemento di riferimento. Per ulteriori informazioni, fare riferimento ai documenti flip di Popper.js .
confine	stringa \| elemento	'scorri Genitore'	Limite del vincolo di overflow del menu a discesa. Accetta i valori di `'viewport'`, `'window'`, `'scrollParent'`o un riferimento HTMLElement (solo JavaScript). Per ulteriori informazioni, fare riferimento ai documenti preventOverflow di Popper.js .
riferimento	stringa \| elemento	'attiva'	Elemento di riferimento del menu a tendina. Accetta i valori di `'toggle'`, `'parent'`o un riferimento HTMLElement. Per ulteriori informazioni, fare riferimento a referenceObject docs di Popper.js .
Schermo	corda	'dinamico'	Per impostazione predefinita, utilizziamo Popper.js per il posizionamento dinamico. Disabilita questo con `static`.

Nota quando boundaryè impostato su un valore diverso da 'scrollParent', lo stile position: staticviene applicato al .dropdowncontenitore.

Metodi

Metodo	Descrizione
`$().dropdown('toggle')`	Attiva o disattiva il menu a discesa di una determinata barra di navigazione o la navigazione a schede.
`$().dropdown('show')`	Mostra il menu a discesa di una determinata barra di navigazione o navigazione a schede.
`$().dropdown('hide')`	Nasconde il menu a discesa di una determinata barra di navigazione o navigazione a schede.
`$().dropdown('update')`	Aggiorna la posizione del menu a discesa di un elemento.
`$().dropdown('dispose')`	Distrugge il menu a discesa di un elemento.

Eventi

Tutti gli eventi a discesa vengono attivati .dropdown-menusull'elemento padre di ' e hanno una relatedTargetproprietà, il cui valore è l'elemento di ancoraggio commutante. hide.bs.dropdowne hidden.bs.dropdowngli eventi hanno una clickEventproprietà (solo quando il tipo di evento originale è click) che contiene un oggetto evento per l'evento click.

Evento	Descrizione
`show.bs.dropdown`	Questo evento viene attivato immediatamente quando viene chiamato il metodo show instance.
`shown.bs.dropdown`	Questo evento viene attivato quando il menu a discesa è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
`hide.bs.dropdown`	Questo evento viene generato immediatamente quando viene chiamato il metodo dell'istanza hide.
`hidden.bs.dropdown`	Questo evento viene attivato quando il menu a discesa ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Dropdown

Panoramica

Accessibilità

Esempi

Pulsante singolo

Pulsante Dividi

Dimensionamento

Indicazioni

Ritiro

Dropright

Dropleft

Voci del menu

Attivo

Disabilitato

Allineamento menu

Allineamento reattivo

Contenuto del menu

Intestazioni

Divisori

Testo

Le forme

Utilizzo

Tramite attributi di dati

Tramite JavaScript

`data-toggle="dropdown"`ancora richiesto

Opzioni

Metodi

Eventi

Dropdown

Panoramica

Accessibilità

Esempi

Pulsante singolo

Pulsante Dividi

Dimensionamento

Indicazioni

Ritiro

Dropright

Dropleft

Voci del menu

Attivo

Disabilitato

Allineamento menu

Allineamento reattivo

Contenuto del menu

Intestazioni

Intestazione a discesa

Divisori

Testo

Le forme

Opzioni a discesa

Utilizzo

Tramite attributi di dati

Tramite JavaScript

data-toggle="dropdown"ancora richiesto

Opzioni

Metodi

Eventi

`data-toggle="dropdown"`ancora richiesto