Twitter Bootstrap下拉列表的事件处理程序？

Question

我想使用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下拉按钮来处理用户操作？我开始怀疑它们是否仅用于导航 - 这个例子给出了一系列动作令人困惑.

Answer 1

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();
});

Answer 2

试试这个:

$('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;
});

Answer 3

在Bootstrap 3中,dropdown.js'为我们提供了触发的各种事件.

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

等等

Answer 4

以下是如何为锚点实现自定义函数的工作示例.

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

您可以将ID附加到锚点:

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

然后使用jQuery的click事件监听器来监听click操作并激活你的功能:

$('#alertMe').click(function(e) {
    alert('alerted');
    e.preventDefault();// prevent the default anchor functionality
});