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

Posted 2023-02-22

【中文标题】Twitter Bootstrap 下拉菜单的事件处理程序？

【英文标题】：Event handlers for Twitter Bootstrap dropdowns?

【发布时间】：2012-08-12 22:04:12

【问题描述】：

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

【问题讨论】：

锚标签点击时触发的功能不工作吗？

首先这些不是任何按钮，这些是锚。您可以通过检查 bootstrap.js 文件来查看事件处理程序。但据我所知，所有这些操作都是用 jQuery 处理的，所以编辑或覆盖这个功能应该没什么大不了的。

【参考方案1】：

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

然后用 jQuery

jQuery("#action-1").click(function(e)
//do something
e.preventDefault();
);

【讨论】：

试过了，但是没有触发任何事件。不过，我可以捕捉到单击按钮的事件。还有什么可能阻碍？

@RonnieKilsbo 不确定。该解决方案确实如前所述，我已经使用过无数次了。您可能没有正确设置锚的 id，或者您可能在元素存在之前绑定 - 我强烈建议在这种情况下使用 jQuery's on。

你是对的，我的错。在我用 jQuery 绑定可点击对象后，我在 DOM 中插入了元素，这是一件坏事。 :) 工作，确认。

【参考方案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;
);

【参考方案3】：

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

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

等

【讨论】：

确实如此，但您仍然不能在引导框架内工作以附加事件处理程序。你自己做。 Bootstrap一直都是在屏幕上做事，而不是提供自定义功能。假设开发人员将能够连接他们自己的下拉事件。

【参考方案4】：

这是一个工作示例，说明如何为锚实现自定义函数。

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

【讨论】：

上面的例子在 jsfiddle 上似乎已经不存在了。

我添加了一个带有有效链接的新示例。谢谢@ethereal。

【参考方案5】：

我一直在看这个。在填充下拉锚点时，我给了它们一个类和数据属性，所以当你需要做一个动作时，你可以这样做：

<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 并生成点击事件。

【参考方案6】：

这里的任何人都在寻找 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 -->

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

【参考方案7】：

完全无需更改按钮组，您可以执行以下操作。下面，我假设您的下拉列表 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 设置为具有fldCategory 的id，这实际上是更高效的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>

【讨论】：

哈！谢谢，这很光滑！ :) 我用了你的第二个例子。

这应该是答案！

【参考方案8】：

在这里，选项具有值、标签和 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>