11

jQuery に変換するためにゆっくりと作業しているアプリケーションがあり、Bootstrap も使用する予定でした。

ただし、Bootstrap 3 を使用している場合、ドロップダウンをクリックすると、メニューが正しく表示されます。ただし、メニューをクリックするか、メニューを「閉じた」後。ボタン/リンクが完全に消え、ページが更新されるまで再表示されません。

これと同じ: https://github.com/twbs/bootstrap/issues/8379

上記のリンクには、Google グループに連絡するように記載されていますが、グループでこれに関するリクエストは見られません。

どんな助けでも大歓迎です！

ありがとう -デビッド

したがって、@ GeekNum88のガイダンスを使用して、これらの行をコメントアウトすると、ドロップダウンが機能しますが、その全体的な効果はまだわかりません:

  function clearMenus() {
    $(backdrop).remove()
    $(toggle).each(function (e) {
    var $parent = getParent($(this))
    if (!$parent.hasClass('open')) return
//      $parent.trigger(e = $.Event('hide.bs.dropdown'))
//      if (e.isDefaultPrevented()) return
    $parent.removeClass('open').trigger('hidden.bs.dropdown')
  })
 }
4

1 に答える 1

2

Bootstrap ドロップダウン メニューの実装は非常に簡単な作業です。Bootstrap ドキュメントの例を参照して、次の手順に従います。

1. titleタグのすぐ下のheadタグの間に次のライブラリを含めます。

Boostrap JS ライブラリの前に jQuery ライブラリが読み込まれることを確認します。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2. bodyタグの間に次の HTML を貼り付けます。

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

作業例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Dropdown</title>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
</body>
</html>

それが機能していることを証明するには 、 fiddleを参照してください。

于 2014-03-07T09:41:13.530 に答える