Twitter Bootstrap下拉列表 - 奇怪的点击行为

Question

当用户点击按钮时，我正在显示引导下拉列表。菜单包含一些可点击的元素。我正在捕捉下拉列表中的所有点击并取消冒泡以保持下拉列表打开，然后在我完成后手动关闭。一切正常。

我遇到的问题是，当用户点击下拉列表中的任何元素时，导致下拉菜单显示的原始按钮看起来就像是被点击了。有没有办法解决这个问题？

屏幕截图和代码如下。

jQuery保持菜单打开

$(".page-header").on("click", ".cr-dropdown-labels", function() { return false; });
$('.cr-dropdown-labels').on("click", "span.state", function() { 
       labelMenuCheckMulti.call(this); return false; 
});

标记

<span class="btn dropdown">
    <div data-toggle="dropdown" class="dropdown-toggle" rel="tooltip" title="Label selected contacts">
        <i class="icon-tag"></i> <b class="caret"></b>
    </div>
    <ul class="dropdown-menu cr-dropdown-labels">
        <li>
            <input type="text" placeholder="Find a label" />
        </li>
        <li class="scrollable">
            <ul class="unstyled labels" data-bind="foreach: allLabels">
                <li><span class="off state"></span> <a style="display: inline;" data-bind="text: name().truncate(30)"></a></li>
            </ul>
        </li>
        <li>
            <a class="apply-label-selections">Apply</a>
        </li>
    </ul>
</span>

Answer 1

您是否尝试将.btn类应用于.dropdown-toggle而不是整个<span>容器？我认为您不需要将菜单放在.btn内。

对于将来的引用：单击菜单会触发整个层次结构上的:active伪状态，这会在您的下拉列表的顶部.btn类中启用活动样式。

代码示例，其中.btn类位于正确的位置。

<div class="dropdown">
    <div class="dropdown-toggle btn">
        <!-- ... -->
    </div>
    <!-- ... -->
</div>

此外，您不应将<div>元素嵌套在<span>：related question中。喜欢使用display: inline-block;。