1

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

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

截图和代码如下。

在此处输入图像描述

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

1 回答 1

2

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

供将来参考：单击菜单会触发:active整个层次结构的伪状态，从而在.btn下拉列表的顶层启用活动样式。

您的代码示例与.btn类在正确的位置。

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

此外，你不应该<div>在里面嵌套元素<span>：相关问题。更喜欢使用display: inline-block;.

于 2012-07-12T20:46:48.570 回答