Come aggiungere un singolo menu a discesa al corpo in Bootstrap

Question

Ho visto la documentazione per il menu a discesa as component e separately using javascript.

Mi chiedo se sia possibile aggiungere un singolo menu a discesa nel corpo del sito Web (posizionato in modo assoluto rispetto all'elemento pulsante cliccabile).

Perché?

• Perché se ho una tabella con 500 righe non voglio aggiungere lo stesso elenco di 10 articoli 500 volte rendendo il codice HTML risultante più grande e più lento quando si tratta di JS.

• Poiché l'elemento genitore può essere nascosto ma voglio ancora che il menu a discesa sia visibile finché non fa clic all'esterno sfocandolo.

ho trovato più persone asking for this feature ma non ho trovato nulla nella documentazione su di esso.

Answer 1

Come dire il bootstrap documents, non ci sono opzioni per i menu a discesa ... Questo è triste, ma significa che attualmente non esiste una soluzione di "bootstrap" per la funzionalità desiderata. Vi è ora, tuttavia, una soluzione nel kit Angular-UI/Bootstrap se la si sta usando. Il ticket a cui si fa riferimento è chiuso perché era finalmente added to the Angular-UI a partire dal 15 luglio 2015.

Tutto quello che devi fare è 'Aggiungi dropdown-append-to-body all'elemento a discesa per aggiungere al menu a discesa interno al corpo. Questo è utile quando il pulsante a discesa è all'interno di un div con overflow: nascosto, e il menu sarebbe altrimenti nascosto. ' (reference)

<div class="btn-group" dropdown dropdown-append-to-body> 
    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>Dropdown on Body <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Spero che questo aiuti!

---

EDIT

Nel tentativo di rispondere a un'altra domanda SO, ho trovato una soluzione che funziona abbastanza bene, se non si sta utilizzando Angular-UI. Potrebbe essere "hacky", ma non rompere la funzionalità del menu di bootstrap, e sembra giocare bene con la maggior parte dei casi di utilizzo per cui l'ho usato.

Quindi lascerò un po 'di violini nel caso in cui qualcun altro lo veda ed è interessato. Il primo illustra il motivo per cui l'uso di un menu del corpo aggiunto potrebbe essere bello, il secondo mostra la soluzione di lavoro:

Problem FIDDLE

Il problema: un menu a discesa selezionare all'interno di un corpo pannello

<div class="panel panel-default"> 
    <div class="panel-body"> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Another item</a></li> 
     <li><a href="#">This is a longer item that will not fit properly</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Solution FIDDLE

(function() { 
    // hold onto the drop down menu            
    var dropdownMenu; 

    // and when you show it, move it to the body          
    $(window).on('show.bs.dropdown', function (e) { 

     // grab the menu   
     dropdownMenu = $(e.target).find('.dropdown-menu'); 

     // detach it and append it to the body 
     $('body').append(dropdownMenu.detach()); 

     // grab the new offset position 
     var eOffset = $(e.target).offset(); 

     // make sure to place it where it would normally go (this could be improved) 
     dropdownMenu.css({ 
      'display': 'block', 
       'top': eOffset.top + $(e.target).outerHeight(), 
       'left': eOffset.left 
     }); 
    }); 

    // and when you hide it, reattach the drop down, and hide it normally             
    $(window).on('hide.bs.dropdown', function (e) { 
     $(e.target).append(dropdownMenu.detach()); 
     dropdownMenu.hide(); 
    }); 
})(); 

---

EDIT Ho finalmente trovato dove ho trovato questa soluzione originariamente.Devo dare il merito di dove credit is due!