Javascript Twitter Bootstrap 下拉菜单的事件处理程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11989146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event handlers for Twitter Bootstrap dropdowns?
提问by Richard
I'd like to use a Twitter Bootstrap dropdown button:
<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 -->
When the user changes the value of the button to 'Another action', instead of simply navigating to #, I'd actually like to handle the action in a custom way.
当用户将按钮的值更改为“另一个操作”时#，我实际上希望以自定义方式处理该操作，而不是简单地导航到。
But I can't see any event handlers in the dropdown pluginfor doing this.
但是我在下拉插件中看不到任何用于执行此操作的事件处理程序。
Is it actually possible to use Bootstrap dropdown buttons to handle user actions? I'm starting to wonder if they're only intended for navigation - it's confusing that the example gives a list of actions.
是否真的可以使用 Bootstrap 下拉按钮来处理用户操作？我开始怀疑它们是否仅用于导航 - 该示例提供了一系列操作令人困惑。
采纳答案by Thomas Jones
Twitter bootstrap is meant to give a baseline functionality, and provides only basic javascript plugins that do something on screen. Any additional content or functionality, you'll have to do yourself.
Twitter bootstrap 旨在提供基线功能，并且仅提供在屏幕上执行某些操作的基本 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 -->
and then with jQuery
然后用 jQuery
jQuery("#action-1").click(function(e){
//do something
e.preventDefault();
});
回答by Fernando
Try this:
尝试这个：
$('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;
});
回答by Stevanicus
In Bootstrap 3 'dropdown.js' provides us with the various events that are triggered.
在 Bootstrap 3 中，'dropdown.js' 为我们提供了各种被触发的事件。
click.bs.dropdown
show.bs.dropdown
shown.bs.dropdown
etc
等等
回答by chapman84
Here is a working example of how you could implement custom functions for your anchors.
这是一个关于如何为锚点实现自定义函数的工作示例。
You can attach an id to your anchor:
您可以将 id 附加到您的锚点：
<li><a id="alertMe" href="#">Action</a></li>
And then use jQuery's click event listener to listen for the click action and fire you function:
然后使用 jQuery 的点击事件监听器来监听点击动作并触发你的功能：
$('#alertMe').click(function(e) {
alert('alerted');
e.preventDefault();// prevent the default anchor functionality
});
回答by Andrew Berry
I have been looking at this. On populating the drop down anchors, I have given them a class and data attributes, so when needing to do an action you can do:
我一直在看这个。在填充下拉锚点时，我给了它们一个类和数据属性，因此当需要执行操作时，您可以执行以下操作：
<li><a class="dropDownListItem" data-name="Fred Smith" href="#">Fred</a></li>
and then in the jQuery doing something like:
然后在 jQuery 中执行以下操作：
$('.dropDownListItem').click(function(e) {
var name = e.currentTarget;
console.log(name.getAttribute("data-name"));
});
So if you have dynamically generated list items in your dropdown and need to use the data that isn't just the text value of the item, you can use the data attributes when creating the dropdown listitem and then just give each item with the class the event, rather than referring to the id's of each item and generating a click event.
因此，如果您在下拉列表中动态生成了列表项，并且需要使用的数据不仅仅是项的文本值，则可以在创建下拉列表项时使用数据属性，然后只为每个项提供类事件，而不是引用每个项目的 id 并生成点击事件。
回答by Volomike
Without having to change your button group at all, you can do the following. Below, I assume your dropdown buttonhas an idof fldCategory.
无需更改按钮组，您可以执行以下操作。下面，我想你的下拉列表中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>
Now, if you set the .btn-groupof this item itself to have the idof fldCategory, that's actually more efficient jQuery and runs a little faster:
现在，如果你设置了.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>
回答by pimbrouwers
Anyone here looking for Knockout JS integration.
这里的任何人都在寻找 Knockout JS 集成。
Given the following HTML (Standard Bootstrap dropdown button):
鉴于以下 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>
Use the following JS:
使用以下JS：
var viewModel = function(){
var self = this;
self.clickTest = function(){
alert("I've been clicked!");
}
};
For those looking to generate dropdown options based on knockout observable array, the code would look something like:
对于那些希望基于敲除 observable 数组生成下拉选项的人，代码如下所示：
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 -->
Note, that the observable array item is implicitly passed into the click function handler for use in the view model code.
请注意，可观察数组项被隐式传递到单击函数处理程序中以在视图模型代码中使用。
