Twitter Bootstrap下拉菜单的事件处理程序？

Question 1

    <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下拉按钮来处理用户操作？我开始怀疑它们是否仅用于导航-令人困惑的是该示例提供了一系列操作。

Question 2

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

Question 3

试试这个：

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

Question 4

在Bootstrap 3中，“ dropdown.js”为我们提供了触发的各种事件。

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

等等

Question 5

这是一个有效的示例，说明如何为锚实现自定义功能。

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

Question 6

我一直在看这个。在填充下拉锚时，我给了它们一个类和数据属性，因此当需要执行操作时，您可以执行以下操作：

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

因此，如果您在下拉列表中动态生成了列表项，并且需要使用不仅是该项目的文本值的数据，那么可以在创建下拉列表项时使用data属性，然后将每个类的事件，而不是引用每个项目的ID并生成click事件。

Question 7

任何在这里寻找Knockout JS集成的人。

给定以下HTML（“标准引导程序”下拉按钮）：

<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 -->

注意，可观察数组项隐式传递到click函数处理程序中，以在视图模型代码中使用。

Question 8

无需完全更改按钮组，您可以执行以下操作。下面，我想你的下拉列表中button有一个id的fldCategory。

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory').parent().find('UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>

现在，如果你设置了.btn-group这个项目本身具有id的fldCategory，这其实更高效的jQuery和运行快一点：

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory BUTTON').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>