Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

twitter bootstrap dropdown links not working

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/

like image 938
user1629366 Avatar asked Aug 31 '13 02:08

user1629366


People also ask

Why dropdown link is not working in bootstrap?

Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.

Why is dropdown not showing?

In your case you have overflow:hidden on . row which holds the menu and therefore the dropdown menu will never show because it overflows the container.

How does dropdown work in bootstrap?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.


1 Answers

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.

like image 98
omma2289 Avatar answered Nov 21 '22 17:11

omma2289