5

Twitter Bootstrap (v2.2.1) の折りたたみ可能なナビゲーション バーとドロップダウン ボタンがあります。それらはすべて、私のデスクトップ ブラウザで楽しく快適に動作します。また、デスクトップ ブラウザ ウィンドウのサイズをモバイル サイズに縮小すると、問題なく動作します。

ただし、モバイルでは、ドロップダウンをクリックするとドロップダウンが開きますが、ドロップダウン内のいずれかのリンクをクリックすると、リンクをたどらずにドロップダウンが閉じます。

これは、この他のSOの質問に似ているようですが、解決策はdata-toggle="dropdown"、私がすでに持っている場所に移動することでした。

ドロップダウン ボタンのページの html は次のとおりです。

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

Mobile Opera、Mobile Firefox、およびデフォルトの Android ブラウザーの Android モバイルでテストしました。

ここに画像の説明を入力

4

2 に答える 2

8

Bootstrap 2.2.1 のバグまで追跡したところ、2.2.2 の変更ログには次のように記載されています。

ドロップダウン: モバイルのドロップダウンが早期に閉じるのを防ぐために一時的な修正が追加されました。

サイトの bootstrap.js を v2.2.1 から v2.2.2 に交換すると、ボタンが機能し始めます。

したがって、最新の v2.2.2 Bootstrap を使用してjsFiddleでこのコードを表示すると、機能します。

<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>
于 2013-01-26T17:44:59.227 に答える
0

私は BS 3.0.2 でこのバグを調査するのに多くの時間を費やしましたが、最初の開発者でさえ、この問題を iOS 6.1.3 の問題としてクローズしたようです。次のオブジェクトの後ろに表示されているドロップダウン ナビゲーションについては、iOS 6.1.3 の z-index が何らかの理由で上書きされています。新しいサイトの立ち上げが間近だったので、これを再設計したくありませんでした。これに関する問題をインラインスタイルのオーバーライドで修正しました

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

これにより、他のいくつかの問題も修正されたようです。閉鎖されたため、ここにソリューションを投稿できませんでしたhttps://github.com/twbs/bootstrap/issues/10027

これが他の誰かが時間、頭痛、髪を節約するのに役立つことを願っています.

于 2014-01-30T19:08:41.940 に答える