Twitter Bootstrap dropdown -- weird clicking behavior

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.

enter image description here

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>

@Andrew - there is no jQuery - bootstrap automatically shows the dropdown when the toggle button is clicked. The code that prevents the dropdown from closing when you click inside the dropdown is a simple return false, but I'll post that — Adam Rackis, Jul 12 '12 at 19:13
Oh, I'm sorry, haven't used bootstrap that much so I just assumed... — ayyp, Jul 12 '12 at 19:15
The only thing I can think of is that there's some similar selector, or that there's some overlap. The behaviour is rather odd... — ayyp, Jul 12 '12 at 19:20
Have you tried applying the `.btn` class to the `.dropdown-toggle` instead of the whole `` container ? I think you don't need the menu to be inside a `.btn`. — Sherbrow, Jul 12 '12 at 19:41
@Sherbrow - throw that up as an answer so I can give you some rep -- that solved it :) — Adam Rackis, Jul 12 '12 at 20:25

score 2 · Accepted Answer · edited May 23 '17 at 10:32

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;.

Twitter Bootstrap dropdown -- weird clicking behavior

1 Answers1