10

私はこのリンクを持っています：

<a href="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

私はアドレスの最後にpreventDefault()andを使用して、return falseを避けます。#そして、それは完璧に機能します。問題は、Bootstrap のドロップダウンで同じことをするときです。return false のままにすると、想定どおり最後に が追加されません#が、 を削除した場合のようにドロップダウンが消えるのも防ぎreturn falseます。これは私のドロップダウンコードです:

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="ddBtn">
    <i class="icon-wrench"></i><span>Parent Item<b class="caret"></b></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#" id="ddSonBtn">Child item</a></li>

Javascript:

$("#ddSonBtn").click(function () {
    //some code

    e.preventDefault();
});

これに対する解決策はありますか？

私は使っている

Bootstrap 2
jQuery

ありがとう。

4

6 に答える 6

14

ブートストラップのドキュメントによると：

http://getbootstrap.com/javascript/#dropdowns

属性で置き換える必要がありhrefますdata-target。つまり

<a data-target="#" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>

イベントハンドラーを抑制したり、表示/非表示の動作を手動で操作したりするよりも、物事を行うためのより「ブートストラップ的な」方法だと思います。

于 2015-02-07T09:07:50.193 に答える
12

十分に文書化されているかどうかはわかりませんが、jQuery イベントでpreventDefault() との両方を呼び出す必要はありません。 return false;

編集: jQuery のonドキュメントから:「イベント ハンドラーから false を返すと、自動的に and が呼び出さevent.stopPropagation()れますevent.preventDefault()」( http://api.jquery.com/on/#event-handler )

return false;はe.preventDefault();とe.stopPropagation();

preventDefaultフォームを送信する送信ボタン、特定のに移動するアンカーなど、要素のデフォルトの動作を防ぎますhref。

stopPropagationイベントが DOM をバブリングするのを防ぎます。つまり、ターゲット要素の親要素ではイベントはトリガーされません。

イベントを操作するときに必要なものを選択してください。あなたの状況でpreventDefaultは、ドロップダウンのクリック ハンドラーを呼び出すだけでよいでしょう。

また、コードではreturn、関数のスコープでの使用は実行の最後の行です。それ以降のコードは、関数の実行時に実行されません。

于 2013-04-08T13:49:34.977 に答える
2

#属性から値を削除するだけhrefです。href空のままにしても有効な HTML です。

<a href="" id="myBtn"><i class="icon-user"></i><span>Add user</span></a>
于 2014-06-01T12:06:24.160 に答える
0

これを Bootstrap + jQuery に使用します。

$(this).parent().parent().parent().removeClass("open")
于 2016-03-10T00:58:39.530 に答える
-1

私はこの方法を試しましたが、うまくいきました。例 (コーヒー スクリプト) は次のようになります。

jQuery ->
  $('.your_mark ul.dropdown-menu li').click ->
    # Do what you want
    $(this.parentElement.parentElement).removeClass('open')
    return false
  1. css クラス 'open' を btn-group div から削除して、ドロップダウン メニューを手動で閉じます。
  2. URL に # が含まれないようにするには、false を返します。
于 2013-08-19T06:52:31.370 に答える