twitter bootstrap dropdown links not working

Question

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/

what do you mean not working? like href="#" when clicked? do you have any code @ the class="disabled"? — leonardeveloper, Aug 31 '13 at 03:08
disabled comes from http://stackoverflow.com/questions/12630188/allow-click-on-twitter-bootstrap-dropdown-toggle-link — user1629366, Aug 31 '13 at 03:27
so you added the disable class to try to solve your problem? — omma2289, Aug 31 '13 at 08:50

score 16 · Accepted Answer · answered Aug 31 '13 at 08:59

16

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.

answered Aug 31 '13 at 08:59

omma2289

54,161
8
64
68

2

why the downvote? the extra attribute is what's causing the links not to work – omma2289 Sep 01 '13 at 20:23

score 0 · Answer 2 · answered Aug 31 '13 at 03:12

0

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.

answered Aug 31 '13 at 03:12

Priya Ranjan Singh

1,567
1
15
29

the fiddle link for google is not working. I am using chrome browser. – user1629366 Aug 31 '13 at 03:28
inside fiddle, i the links don't work. if you right click and say, 'open link in new window' the link works - suggesting if this code was to be used on a webpage, it would work just fine. – Priya Ranjan Singh Sep 01 '13 at 07:46

score 0 · Answer 3 · answered Nov 30 '13 at 21:52

0

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 .

answered Nov 30 '13 at 21:52

Amit

1

score 0 · Answer 4 · edited Nov 28 '22 at 04:30

0

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.

edited Nov 28 '22 at 04:30

4b0

21,981
30
95
142

answered Nov 25 '22 at 16:10

Idron Developer

1

twitter bootstrap dropdown links not working

4 Answers4

Linked