Bugfix per dropdown menu in Twitter Bootstrap e dispositivi mobili

29 Luglio 2013 Javascript, Css
ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Utilizzando twitter bootstrap (versione 2.3.2 e precedenti) si verifica un errore con il menu dropdown nei dispositivi mobili (es. android). Praticamente selezionando il link all'interno della lista a discesa il menu si chiude e il link non viene selezionato. Esempio di codice html:


<div class="nav-collapse collapse">
 <ul class="nav pull-right">
  <li>
   <a href="test.php">
    test
   </a>
  </li>
  <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    test
    <b class="caret"></b>
   </a>
   <ul class="dropdown-menu">
    <li>
     <a href="test.php>">
      test
     </a>
    </li>
    <li>
     <a href="test.php">
      test
     </a>
    </li>
   </ul>
  </li>
 </ul>
</div>

Per risolvere il problema è sufficiente inserire un piccolo blocco di codice javascript dopo l'inclusione del file bootstrap.js (o bootstrap.min.js):



$('.dropdown-toggle').click(function(e) {
 e.preventDefault();
 setTimeout($.proxy(function() {
  if ('ontouchstart' in document.documentElement) {
   $(this).siblings('.dropdown-backdrop').off().remove();
  }
 }, this), 0);
});

FONTE:https://github.com/twbs/bootstrap/issues/4550

Commenti