Question

I’m showing a bootstrap dropdown when the user clicks a button. The menu has some clickable elements. I’m catching all clicks within the dropdown and cancelling bubbling to keep the dropdown open, and then closing manually when I’m done. That all works.

The problem I’m having is that when the user clicks on any elements in the dropdown, the original button that caused the dropdown to show looks like it’s being clicked on. Is there a way to turn this off?

Screenshot and code are below.

jQuery to keep the menu open

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

Markup

<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

Have you tried applying the .btn class to the .dropdown-toggle instead of the whole <span> container ? I think you don’t need the menu to be inside a .btn.

For future references : the click on the menu triggers the :active pseudo-state on the whole hierarchy, which enable the active style on the top .btn class of your dropdown.

Sample of your code with the .btn class at the right place.

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

More over, you should not nest <div> elements inside <span> : related question. Prefer the use of display: inline-block;.