CODEWITHSUNDEEP
drop-down-menutwitter-bootstrap
codefreak
codefreak

Reputation: 7131

twitter bootstrap dropdown button inside dropdown menu

I managed to show a dropdown button inside a dropdown menu of another dropdown button.

Take a look at http://jsbin.com/opepeg/1/edit for what I am trying to achieve.

Now problem is that when I click primary button it works perfectly, but the button inside doesn't show it's menu. What wrong am I doing?

Upvotes: 1

Views: 2842

Answers (1)

codefreak
codefreak

Reputation: 7131

I solved it by adding:

$(this).parent().toggleClass('open');

to onclick event of tag of innner button. You can see that in jsbin link I provided in question.

Here's modified html:

    <a class="dropdown-toggle btn" data-toggle="dropdown" href="javascript:;" 
onclick="$(this).parent().toggleClass('open');">
      Search by date&nbsp;<span class="caret"></span>
    </a>

and some css:

.btn-group.open .btn-group .btn.dropdown-toggle{
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(top, #ffffff, #e6e6e6);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Upvotes: 2

Related Questions