Bootstrap dropdown menu does not show up

Question

I'm using bootstrap3.1 recently, and I want to use "dropdown menu", here is official doc: http://getbootstrap.com/components/#dropdowns

The code is very sample and it likes below:

    <div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

But somehow it does not work, you could check here : http://jsfiddle.net/52DDe/1/

Is there something I forgot to load ?

thanks,

++++++++++++++++++++++++++++++++++++++++++

The problem is resolved now by add css:

Note :

To resolve this problem, CSS needs to set:

.test>.dropdown>.dropdown-menu
{
    display: block;
    margin-bottom: 5px;
    position: static;
}

And use div:

<div class="test">
.....
</div>

score 1 · Answer 1 · edited May 23 '17 at 12:17

1

Remove the "sr-only" class, and the code will work.

http://v3.bootcss.com/javascript/#dropdowns may be helpful, though it's in Chinese.

Look what-is-sr-only-in-bootstrap-3 for more about "sr-only".

edited May 23 '17 at 12:17

Community

1
1

answered Apr 23 '14 at 03:13

Bian Jiaping

888
8
20

remove "sr-only" will display as a "button" style dropdown menu, that means I have to click the button to show menu. that's not same as official doc – user3562660 Apr 23 '14 at 03:24
According to the documentation, "Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. ", you can just use
.... to show the menu content.
– Bian Jiaping Apr 23 '14 at 03:34
I just finger out that I have to set CSS, keep the menu open always. this problem is resolved – user3562660 Apr 23 '14 at 03:54

score 0 · Answer 2 · answered Mar 18 '17 at 18:42

In my case I removed link to bootstrap.min.js what was included before dropdown.js and it worked for me.

The Dropdown looks like following (with little thymeleaf code what can be ignored):

<div class="dropdown pull-right">
    <button id="dropdownProperties" class="btn btn-primary 
        dropdown-toggle" type="button" data-toggle="dropdown" 
        aria-haspopup="true" aria-expanded="false"
    >
        Immobilien <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li th:each="property : ${properties}">
            <a href="#" >
                <span th:text="${property.address.street}">ADRESSE</span>
            </a>
        </li>
    </ul>
</div>

Bootstrap dropdown menu does not show up

2 Answers2