CODEWITHSUNDEEP
javascripttwitter-bootstrap
user1629366
user1629366

Reputation: 2011

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/

Upvotes: 8

Views: 22324

Answers (4)

Idron Developer
Idron Developer

Reputation: 1

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.

Upvotes: 0

Amit
Amit

Reputation: 1

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 .

Upvotes: 0

omma2289
omma2289

Reputation: 54629

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.

Upvotes: 16

Priya Ranjan Singh
Priya Ranjan Singh

Reputation: 1567

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.

Upvotes: 0

Related Questions