ユーザーがボタンをクリックすると、ブートストラップ ドロップダウンが表示されます。メニューには、クリック可能な要素がいくつかあります。ドロップダウン内のすべてのクリックをキャッチし、バブリングをキャンセルしてドロップダウンを開いたままにし、完了したら手動で閉じます。それはすべてうまくいきます。
私が抱えている問題は、ユーザーがドロップダウンの要素をクリックすると、ドロップダウンが表示された元のボタンがクリックされているように見えることです。これをオフにする方法はありますか?
スクリーンショットとコードは以下です。
メニューを開いたままにする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>