Question

我有一个带有以下标记的Bootstrap下拉按钮：

<div class="btn-group dropup">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Test<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </li>
    </ul>
</div>

当您点击a.dropdown-toggle时，Bootstrap的javascript会通过将ul.dropdown-menu类添加到open来切换div.btn-group的可见性。这一切都很好。

当我将自己的javascript函数添加到a.dropdown-toggle的点击事件时，会遇到我遇到的问题。像这样：

$('a.dropdown-toggle').click(function (e) {
    e.preventDefault();
    $('a.dropdown-toggle').html('Testing...');
});

当我这样做时，会发生奇怪的事情。当您单击按钮时，它会根据需要扩展菜单除了直接单击按钮中的.caret时。当您直接点击.caret时，它只会执行我的点击事件。

如何解决此问题并直接点击.caret切换菜单，例如点按按钮上的任何其他位置。

http://jsfiddle.net/UZkQL/

Answer 1

你的小提琴你有：

$('a.dropdown-toggle').html('Testing...<span class="caret"></span>');

问题是您使用克拉重新创建了span元素，这似乎使得它没有绑定到它的点击处理程序。一个快速而肮脏的解决方案是：

$('a.dropdown-toggle').click(function (e) {
    e.preventDefault();
    if ($('a.dropdown-toggle').text().indexOf('ing...') == -1) {
        $('a.dropdown-toggle').find('span').before('ing...');
    }
});

将click事件添加到Bootstrap下拉切换时的奇怪行为

1 个答案: