I am using bootstrap version 2.0

I have the following html structure -

Now when I click on the Filter by Team the dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do not work. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.

<li style="margin-left: 12px;">
        <div class="dropdown" style="margin-top: 5px;">
          <a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
            Filter by Team
          </a>
          <ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">

            <li>
              <a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
            </li>
            <li class="divider"></li>

            <li>
              <a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
            </li>
            <li class="divider"></li>

            <li>
              <a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
            </li>
            <li class="divider"></li>


          </ul>
        </div>
      </li>

The fiddle can be found here - /

I am using bootstrap version 2.0

I have the following html structure -

Now when I click on the Filter by Team the dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do not work. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.

<li style="margin-left: 12px;">
        <div class="dropdown" style="margin-top: 5px;">
          <a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
            Filter by Team
          </a>
          <ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">

            <li>
              <a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
            </li>
            <li class="divider"></li>

            <li>
              <a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
            </li>
            <li class="divider"></li>

            <li>
              <a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
            </li>
            <li class="divider"></li>


          </ul>
        </div>
      </li>

The fiddle can be found here - http://jsfiddle.net/ktgrw/

• javascript
• twitter-bootstrap

• 1 what version of bootstrap you use? – leonardeveloper Commented Aug 31, 2013 at 2:49
• bootstrap version 2.0.4 – user1629366 Commented Aug 31, 2013 at 2:54
• what do you mean not working? like href="#" when clicked? do you have any code @ the class="disabled"? – leonardeveloper Commented Aug 31, 2013 at 3:08
• What is class="disabled" on anchor tag doing? – Konsole Commented Aug 31, 2013 at 3:09
• disabled comes from stackoverflow.com/questions/12630188/… – user1629366 Commented Aug 31, 2013 at 3:27

4 Answers 4

The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.

Here's the updated fiddle with the correct bootstrap version and the attribute removed.

Also the disabled class is used on the toggle link to prevent the opening of the dropdown, you should remove it from your links since it's not serving any real purpose.

The links are working perfectly fine. When we use relative links like href="/task/list/orgteam/5/" we need to be sure that we are running this page on a website where these links exist.

To add to clarity, I added a link to google as the last list item in this new fiddle (click here to view) and because it uses absolute url href="http://www.google.com", it works just fine.

I faced same problem with bootstrap framework and at the end got the solution (worked for me). Import all your required javascripts, mainly jquery.js .

The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.

I had the same problem too but after removing the data-toggle attribute, my <a> links are working just fine.