Twitter Bootstrap Question posted in

Dropdown Menu of Twitter Bootstrap doesn't work — doesn't unfold

I am using Twitter Bootstrap in my web app and have included bootstrap.css/js files. But when I click on menu base it doesn’t unfold and nothing happens.

Any idea what is wrong? Here is my code:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">menu base</a>
    <ul class="dropdown-menu" aria-labelledby="more-drop">
         <li class="dropdown-menuitem">
               <a href="/page1">sub menu1</a>
         </li>
         <li class="dropdown-menuitem">
               <a href="/page2">sub menu2</a>
         </li>
     </ul>
</li>
Tags:

3

Answers


  1. 0

    Here is the Working Code:

    Working Fiddle: Dropdown Menu Fix

    Mistake:

    1- Dropdown Menu ‘aria-labelledby’ is not defined

    2- Anchor Tag ID is not set with ‘aria-labelledby’ value

    aria-labelledby: Identifies the element (or elements) that labels the current element.

      <li class="dropdown">
    <a id="dropdownMenu1" class="dropdown-toggle" data-toggle="dropdown">menu base</a>
    <ul class="dropdown-menu" aria-labelledby="more-drop" aria-labelledby="dropdownMenu1">
        <li class="dropdown-menuitem">
            <a href="/page1">sub menu1</a>
        </li>
        <li class="dropdown-menuitem">
            <a href="/page2">sub menu2</a>
        </li>
    </ul>
</li>
    Login or Signup to reply.
  2. 0

    You have missed the following attributes necessary for Bootstrap dropdown to work as toggle dropdown menu.

    • role=”button”
    • aria-haspopup=”true”
    • aria-expanded=”false”

    Code Snippet

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<ul>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a>
      </li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
  3. 0

    Hope this may helps you

    <!DOCTYPE html>
<html>
<head>
<title>dropdown menu of twitter bootstrap doesn't work — doesn't unfold</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"  crossorigin="anonymous"></script>
</head>
<body>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu base <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">sub menu1</a></li>
        <li><a href="#">sub menu2</a></li>
    </ul>
</li>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search