web-dev-qa-db-ja.com

ダブルクリックしてトグルする必要がないBootstrapドロップダウン

Bootstrapドロップダウンメニューを使用しています。問題は、最初のクリックでドロップダウンしないことです。トグルを切り替えるには2回クリックする必要があります。クリックイベントが何らかの形で取得されていると思います伝播する前にどこかに引っかかった...

それを修正する方法はありますか？

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap
40
Jago

誰かがangular with ui-bootstrapモジュールと通常のbootstrap HTMLドロップダウン定義を使用している場合、2回のクリックも必要です。

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=> data-toggle="dropdown"を削除すると、問題が修正されます。

この後、ワンクリックでドロップダウンを開くと機能します。

参照： https://github.com/angular-ui/bootstrap/issues/2294

75
minni

In Bootstrap 4、bootstrap.min.jsおよびbootstrap.bundle.min.jsはドロップダウンで競合するようになりました。

bootstrap.min.jsを削除すると、ドロップダウンのダブルクリックの問題が解決されます。

31
Devil Bro

これは、ドロップダウンのTwitter Bootstrap構文にhrefタグが含まれているためです。これを防ぐには、preventDefaultとstopPropagationが必要です。このような何かがトリックを行います：

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});
8
rdougan

これは、何らかの形でBootstrapがプロジェクトに2回含まれている場合に発生する可能性があります。

Bootstrap.min.jsとbootstrap.bundle.min.js（bootstrapおよびpopper js）の両方がプロジェクトに含まれている場合、冗長bootstrap js。

Jsの組み合わせは次のようにする必要があります。bootstrap.bundle.min.jsのみまたはbootstrap.min.js AND popper.min.js詳細については、 https://getbootstrap.com/docs/ 4.1/getting-started/contents /

8
Rajaneesh Singh

In BootStrap 4、「bootstrap.bundle.min.js」と「bootstrap.min.js」の両方を含めるべきではありません。これにより、ドロップダウンの問題が発生します。「bootstrap.bundle」のみを保持してください。 min.js」には必要なコードがすべて含まれているためです。

4
PraBhu

私の場合、他の答えは機能しません。

application.js、私が持っていた：

//= require popper.min
//= require bootstrap-sprockets

ブートストラップスプロケットを削除すると、問題が修正されました。

3
sscirrus

https://stackoverflow.com/a/27278529/1673289 でjaybroと同じ問題を抱えていましたが、それらの解決策は役に立ちませんでした。

両方のケースを修正する方法は、以下を追加することでした：

data-disabled="true"

data-toggle="dropdown"属性を持つ要素に。

1
JoshSub

Bootstrap.bundle.jsへのリンクを削除し、popper.jsへのリンクを追加することで問題を解決しました

前

<script src="bootstrap/jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

後

<script src="bootstrap/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

bootstrap=ファイルをダウンロードし、「bootstrap」というディレクトリに保存したことに注意してください。その中に3つの異なるディレクトリ「css」、「js」、「jquery」がありました。

1
Nishant Ingle

これは、複数のbootstrap.jsファイルがある場合にも発生する可能性があります！まだ古いバージョンがあるかどうかを確認し、そのスクリプトを削除します。

1
Andreas Zorpidis

Angular.ui.bootstrapのソースコードとネイティブbootstrap.jsを調べることで、両方のドロップダウンハンドラーがあります。

提案された解決策：angular.ui.bootstrapを調整しますdropdownToggleディレクティブは「A」属性のみに制限します。したがって、この問題を解決するには、dropdownToggleを変更して「CA」を「A」に制限する必要があります。これにより、bootstrap.jsによって既に処理されているangle.ui.bootstrapからClass lookerが非表示になります。

angle.ui.bootstrapの縮小版については、この行ディレクティブを探してください（ "dropdownToggle"、function（）{return {restrict："CA"、require： "？^ dropdown"、link：function （あいうえお）{

「CA」を「A」に置き換えます。

乾杯

1
Jomaf

@ rajaneesh-singhが上記で述べたように、このバグはBootstrapが2回含まれている場合に発生します。

私の場合、公式のbootstrapとTwitterバージョンでは重複しています：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.1.1/js/bootstrap.js"></script>

Twitterバージョンを削除したところ、すべて正常に動作しています。

0
b126

一部のページではダブルクリックする必要があり、他のページはシングルクリックであることがわかりました。

data-toggle="dropdown"を削除すると、ダブルクリックがシングルになり、シングルが壊れました。

Devツールでhtmlを比較し（同じhtmlが提供されているため）、ダブルクリックページでdata-toggleのdivが次のようになっていることを見つけました。

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
     aria-haspopup="true" aria-expanded="false">

しかし、シングルクリックhtmlは次のようになります。

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">

そのため、ドキュメントの準備ができたら、attr検出とデフォルトの回答を使用せずに、ダブルクリックでシングルクリックで開くようにしました。

if (!($('#notifications').attr('aria-haspopup') == undefined &&
    $('#notifications').attr('aria-expanded') == undefined))
{
    $('.dropdown-toggle').click(function (e) { return false; });
}
0
jaybro