1

現在、シングルページ アプリケーションに 2.x Bootstrap バージョンを使用しています。

デスクトップでは、問題なく動作します。

ただし、iPad と携帯電話では、ナビ ボタンが表示されます。ただし、表示されているドロップダウン項目の項目をクリックすると、自動的に閉じません。

シングルページのアプリなので、もう一度クリックして非表示にして内容を見るのは面倒です。

li が nav-collapse 要素でクリックされたときに collapse('hide') を試しましたが、ドロップダウン メニューの他の li 要素が非表示になります。

$('.nav-collapse > li').click(function(e)
$(this).collapse('hide')

リンクがクリックされたときに非表示にする最良の方法は何ですか?

ありがとう。

4

3 に答える 3

1

私も同じ問題にぶつかり、navアイテムのリンク自体にデータ属性（開いている.nav-collapseのみを折りたたむように変更）を追加することで解決しました。

リンク上のデータターゲットは「.nav-collapse.in」であり、展開されたナビゲーションのみを選択するため、クローズとしてのみ機能することに注意してください。

例えば：

<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
    <!-- Collapse icon goes here -->
</a>

<div class="nav-collapse">
    <ul class="nav">
        <li>
            <a href="#" data-toggle="collapse" data-target=".nav-collapse.in">Link</a>
        </li>
    </ul>
</div>

これは、MacOSXChromeのBootstrap2.2.1でのみテストされています。これは反復的でDRYではありませんが、HTMLへの折りたたみ宣言を保持します。

于 2012-11-05T07:53:35.113 に答える
1

Bootrap 3.3.4 では、次をアンカー タグに追加して、ナビゲーションを自動的に閉じることができます。

data-toggle="折りたたみ" data-target="#navbar"

于 2015-04-02T04:55:50.057 に答える
0

Twitter Bootstrapのドロップダウンプラグイン（問題＃4497を参照）にバグがあります。これは2.1.0で導入され、ドロップダウンメニュー項目のクリックイベントを誤ってブロックします。2.1.1で修正する必要があります。

CDNを使用している場合、または単にbootstrap-dropdown.jsを編集/再コンパイルしたくない場合は、次の回避策をページに追加して、ブートストラップ後にロードすることができます。

$('body')
  .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
  .on('click.dropdown touchstart.dropdown.data-api'
    , '.dropdown form'
    , function (e) { e.stopPropagation() })

独自のコードをホストしていて、bootstrap.min.jsの作成に慣れている場合は、 145行目でbootstrap-dropdown.jsを次のように編集できます。

'.dropdown'

に変更する必要があります

'.dropdown form'
于 2012-08-31T17:50:06.093 に答える