88

Twitter Bootstrap ドロップダウン ボタンを使用したい:

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

ユーザーがボタンの値を「別のアクション」に変更すると、単に に移動するのではなく、#実際にカスタムの方法でアクションを処理したいと思います。

しかし、これを行うためのドロップダウン プラグインにイベント ハンドラーが表示されません。

Bootstrap ドロップダウン ボタンを使用してユーザー アクションを処理することは実際に可能ですか? それらがナビゲーションのみを目的としたものなのか疑問に思い始めています.例がアクションのリストを示しているのは混乱しています.

4

8 に答える 8

79

Twitter ブートストラップはベースライン機能を提供することを目的としており、画面上で何かを行う基本的な JavaScript プラグインのみを提供します。追加のコンテンツや機能は、自分で行う必要があります。

<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#" id="action-1">Action</a></li>
    <li><a href="#" id="action-2">Another action</a></li>
    <li><a href="#" id="action-3">Something else here</a></li>
  </ul>
</div><!-- /btn-group -->

そしてjQueryで

jQuery("#action-1").click(function(e){
//do something
e.preventDefault();
});
于 2012-08-16T14:24:42.213 に答える
18

これを試して：

$('div.btn-group ul.dropdown-menu li a').click(function (e) {
    var $div = $(this).parent().parent().parent(); 
    var $btn = $div.find('button');
    $btn.html($(this).text() + ' <span class="caret"></span>');
    $div.removeClass('open');
    e.preventDefault();
    return false;
});
于 2013-03-16T17:55:37.910 に答える
14

Bootstrap 3 では、'dropdown.js' がトリガーされるさまざまなイベントを提供します。

click.bs.dropdown
show.bs.dropdown
shown.bs.dropdown

等

于 2015-06-25T16:53:16.130 に答える
8

以下は、アンカーにカスタム関数を実装する方法の実例です。

http://jsfiddle.net/CH2NZ/43/

アンカーに ID を付けることができます:

<li><a id="alertMe" href="#">Action</a></li>

次に、jQuery のクリック イベント リスナーを使用してクリック アクションをリッスンし、関数を起動します。

$('#alertMe').click(function(e) {
    alert('alerted');
    e.preventDefault();// prevent the default anchor functionality
});
于 2012-08-16T14:27:03.837 に答える
4

私はこれを見てきました。ドロップ ダウン アンカーを設定する際に、クラスとデータ属性を指定したので、アクションを実行する必要がある場合は、次の操作を実行できます。

<li><a class="dropDownListItem" data-name="Fred Smith" href="#">Fred</a></li>

そしてjQueryで次のようなことをします：

$('.dropDownListItem').click(function(e) {
    var name = e.currentTarget;
    console.log(name.getAttribute("data-name"));
});

したがって、ドロップダウンで動的に生成されたリスト項目があり、項目のテキスト値だけではないデータを使用する必要がある場合は、ドロップダウン リスト項目を作成するときにデータ属性を使用して、各項目にクラスを与えるだけです。各アイテムの ID を参照してクリック イベントを生成するのではなく、

于 2016-09-20T12:42:13.787 に答える
3

Knockout JS 統合を探している人は誰でもここにいます。

次の HTML (標準の Bootstrap ドロップダウン ボタン) があるとします。

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select an item               
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 1</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 2</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 3</a>
        </li>
    </ul>
</div>

次の JS を使用します。

var viewModel = function(){
    var self = this;

    self.clickTest = function(){
        alert("I've been clicked!");
    }  
};

ノックアウト オブザーバブル配列に基づいてドロップダウン オプションを生成しようとしている場合、コードは次のようになります。

var viewModel = function(){
    var self = this;

    self.dropdownOptions = ko.observableArray([
        { id: 1, label: "Click 1" },
        { id: 2, label: "Click 2" },
        { id: 3, label: "Click 3" }
    ])

    self.clickTest = function(item){
        alert("Item with id:" + item.id + " was clicked!");
    }  
};

<!-- REST OF DD CODE -->
<ul class="dropdown-menu" role="menu">
    <!-- ko foreach: { data: dropdownOptions, as: 'option' } -->
    <li>
        <a href="javascript:;" data-bind="click: $parent.clickTest, text: option.clickTest"></a>
    </li>
    <!-- /ko -->
</ul>
<!-- REST OF DD CODE -->

監視可能な配列項目は、ビュー モデル コードで使用するためにクリック関数ハンドラーに暗黙的に渡されることに注意してください。

于 2015-06-03T13:44:49.443 に答える