Twitter Bootstrap v2.2.1) dropdown-links funktioniert nicht auf mobilen

Ich habe einen Twitter-Bootstrap (v2.2.1) auch zerlegbar navbar und dropdown-Schaltflächen. Sie arbeiten alle munter und glücklich in meinem desktop-browser und auch, wenn ich die Größe auf meinem desktop-browser-Fenster auf die mobile Größe Sie arbeiten gerne.

Jedoch auf einem mobile, dem Aufklappmenü öffnen, wenn Sie klicken Sie auf die dropdown-aber mit Klick auf die links im dropdown nur bewirkt, dass die dropdown-Liste zu schließen, ohne den link.

Scheint dies ähnlich zu diese andere Frage ALSO, aber die Lösung war es, sich zu bewegen die data-toggle="dropdown" auf dem Platz habe ich Sie schon.

Hier die html-Ausgabe auf der Seite für die dropdown-Schaltflächen:

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

Getestet habe ich es auf einem android-Handy in den Opera Mobile, Firefox Mobile und das Standard-android-browser.

Twitter Bootstrap v2.2.1) dropdown-links funktioniert nicht auf mobilen

InformationsquelleAutor icc97 | 2013-01-09
  1. 8

    Habe ich verfolgt es, bis auf einen Fehler in der Bootstrap 2.2.1 die changelog für 2.2.2 Staaten:

    Dropdowns: Temporary fix Hinzugefügt für dropdowns auf mobilen, um zu verhindern, schließen früh.

    Wenn ich die vertauscht bootstrap.js auf meiner Website von v2.2.1 auf v2.2.2 klicken Sie mit der Arbeit beginnen.

    So, jetzt, wenn ich diesen code auf jsFiddle mit der neuesten v2.2.2, Bootstrap, dann funktioniert es. 

    <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>
    InformationsquelleAutor icc97
  2. 0

    Verbrachte ich viel Zeit mit der Erforschung dieser bug auf BS 3.0.2 und sogar der original-Entwickler scheinen geschlossen haben, dieses Problem als iOS 6.1.3 Problem. Wie für die dropdown-nav zeigt hinter dem nächsten Objekt, iOS 6.1.3 z-index überschrieben wird aus irgendeinem Grund. Weil ich war so nah an Start meiner neuen Website, ich wollte nicht, um die Neugestaltung dieser. Ich heftete meine Probleme mit diesem mit einem in-line-Stil-überschreibung in der

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

    Dieser schien auch zu beheben einige andere Fragen. Da es geschlossen war, konnte ich nicht posten, meine Lösung, um es hier https://github.com/twbs/bootstrap/issues/10027

    Hoffe, dies hilft jemand anderes sparen Zeit, Kopf Schmerzen und Haar.

    InformationsquelleAutor user2197018
Schreibe einen Kommentar