我想使用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 -->
当用户将按钮的值更改为“其他操作”时，我实际上希望以自定义方式处理操作，而不是简单地导航到#。
但我无法看到任何事件处理程序in the dropdown plugin这样做。
是否可以使用Bootstrap下拉按钮来处理用户操作？我开始怀疑它们是否仅用于导航 - 这个例子给出了一系列动作令人困惑。
答案 0 :(得分：72)
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();
});
答案 1 :(得分：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;
});
答案 2 :(得分：14)
在Bootstrap 3中，dropdown.js为我们提供了触发的各种事件。
<div class="footernav">
<ul class="footer-lt">
<li><a>Home</a></li>
<li><a>Resort Overview</a></li>
<li><a>Photo Gallery</a></li>
<li><a>Contact Us</a></li>
<li class="footertextcolor">Phone</li>
<li>+000 60 275-737<li>
<li class="footertextcolor">Address</li>
<li>Armenia, Yerevan,</li>
<li>G. Hovsepyan </li>
</ul>
</div>
等
答案 3 :(得分：8)
以下是如何为锚点实现自定义函数的工作示例。
您可以在锚点附加一个ID：
<li><a id="alertMe" href="#">Action</a></li>
然后使用jQuery的click事件监听器来监听点击操作并激活你的功能：
$('#alertMe').click(function(e) {
alert('alerted');
e.preventDefault();// prevent the default anchor functionality
});
答案 4 :(得分：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并生成点击事件。
答案 5 :(得分：3)
任何人都在寻找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!");
}
};
对于那些希望基于knockout 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 -->
注意，可观察数组项被隐式传递给 单击函数处理程序以在视图模型代码中使用。
答案 6 :(得分：3)
无需更改按钮组，您可以执行以下操作。下面，我假设您的下拉列表button的{{1}}为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，那实际上jQuery效率更高，运行速度更快一些：
fldCategory答案 7 :(得分：0)
在这里，选项具有值、标签和 css 类，它们在选择时反映在父元素上。
$(document).on('click','.update_app_status', function (e) {
let $div = $(this).parent().parent();
let $btn = $div.find('.vBtnMain');
let $btn2 = $div.find('.vBtnArrow');
let cssClass = $(this).data('status_class');
let status_value = $(this).data('status_value');
let status_label = $(this).data('status_label');
$btn.html(status_label);
$btn.removeClass();
$btn2.removeClass();
$btn.addClass('btn btn-sm vBtnMain '+cssClass);
$btn2.addClass('btn btn-sm vBtnArrow dropdown-toggle dropdown-toggle-split '+cssClass);
$div.removeClass('show');
$div.find('.dropdown-menu').removeClass('show');
e.preventDefault();
return false;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button type="button" class="btn btn-sm vBtnMain btn-warning">Awaiting Review</button>
<button type="button" class="btn btn-sm vBtnArrow btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item update_app_status" data-status_class="btn-warning" data-status_value="1" data-status_label="Awaiting Review" href="#">Awaiting Review</a>
<a class="dropdown-item update_app_status" data-status_class="btn-info" data-status_value="2" data-status_label="Reviewed" href="#">Reviewed</a>
<a class="dropdown-item update_app_status" data-status_class="btn-dark" data-status_value="3" data-status_label="Contacting" href="#">Contacting</a>
<a class="dropdown-item update_app_status" data-status_class="btn-success" data-status_value="4" data-status_label="Hired" href="#">Hired</a>
<a class="dropdown-item update_app_status" data-status_class="btn-danger" data-status_value="5" data-status_label="Rejected" href="#">Rejected</a>
</div>
</div>