Łącza rozwijane na Twitterze Bootstrap (v2.2.1) nie działają na telefonie komórkowym.

Mam przycisk do rozwijania Bootstrap (v2.2.1) i przyciski rozwijane. W mojej przeglądarce na pulpicie działają bardzo fajnie i szczęśliwie, a także, gdy zmniejszam rozmiar okna przeglądarki do rozmiaru urządzenia mobilnego, pracują szczęśliwie.Łącza rozwijane na Twitterze Bootstrap (v2.2.1) nie działają na telefonie komórkowym.

Jednak na urządzeniu mobilnym listy rozwijane będą otwierane po kliknięciu menu, ale kliknięcie dowolnego z linków w menu spowoduje zamknięcie menu bez kliknięcia linku.

Wygląda to podobnie do this other SO question, ale rozwiązaniem było przeniesienie data-toggle="dropdown" do miejsca, w którym już je mam.

Oto html na stronie za pomocą przycisków rozwijanych:

<html> 
<head> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> 
</head> 
<body> 
<div class="btn-group"> 
    <a class="btn btn-primary" href="link1.php"> 
     Dropdown button 
    </a> 
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li class="nav-header">Recent</li> 
     <li><a href="http://google.com">Google</a></li> 
     <li><a href="http://bing.com">Bing</a></li> 
    </ul> 
</div> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 
<script type="text/javascript"> 
    /** 
    * Twitter Bootstrap JQuery 
    */ 
    //!function ($) { 
     $(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    //} 
</script> 
</body> 
</html>

Testowałem go na Android telefonu w telefonie Opera Mobile Firefox i domyślnej przeglądarki Androida.

enter image description here

Źródło

2013-01-09 icc97

mam śledzone ją w dół do błędu w Bootstrap 2.2.1 changelog for 2.2.2 stany:

Dropdowns: Temporary fix dodane do rozwijanego menu na komórkowego, aby zapobiec ich zamykaniu wcześnie .

Jeśli zamieściłem plik bootstrap.js w mojej witrynie z wersji 2.2.2 na wersję 2.2.2, przyciski zaczynają działać.

Tak więc, jeśli przeglądam ten kod na jsFiddle przy użyciu najnowszego Bootstrapa v2.2.2, to działa.

<html> 
<head> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> 
</head> 
<body> 
<div class="container"> 
<div class="btn-group"> 
    <a class="btn btn-primary" href="link1.php"> 
     Dropdown button 
    </a> 
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li class="nav-header">Recent</li> 
     <li><a href="http://google.com">Google</a></li> 
     <li><a href="http://bing.com">Bing</a></li> 
    </ul> 
</div> 
</div> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 
<script type="text/javascript"> 
     $(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
</script> 
</body> 
</html>

Źródło

2013-01-26 17:44:59 icc97

Spędziłem dużo czasu na poszukiwania tego błędu na BS 3.0.2, a nawet oryginalne deweloperzy wydają się zamknęły tę kwestię jako iOS 6.1.3 kwestii. Jeśli chodzi o rozwijaną nawigację wyświetlaną za następnym następującym obiektem, iOS 6.1.3 z-index jest nadpisywany z jakiegoś powodu. Ponieważ byłem tak blisko uruchamiania mojej nowej witryny, nie chciałem jej przeprojektować. Naprawiłem swoje problemy z tym, zastępując styl w linii w

<nav class="navbar navbar-default" role="navigation" style="z-index:1000;">.

To również wydawało się naprawić kilka innych problemów. Ponieważ został zamknięty, nie mogłem opublikować mojego rozwiązania tutaj https://github.com/twbs/bootstrap/issues/10027

Mam nadzieję, że to pomoże komuś innemu zaoszczędzić czas, ból głowy i włosy.

Źródło

2014-01-30 19:08:41 user2197018

Łącza rozwijane na Twitterze Bootstrap (v2.2.1) nie działają na telefonie komórkowym.

Odpowiedz

Powiązane problemy