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

我遇到的问题是,当用户单击下拉菜单中的任何元素时,导致下拉菜单显示的原始按钮看起来像是在被单击。有没有办法关闭此功能?

屏幕截图和代码如下。



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>

最佳答案

您是否尝试过将.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;

07-24 09:43
查看更多