href not working on dropdown-toggle - bootstrap

Question

I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.

FIDDLE HERE

Simple HTML:

<div class="btn-group">
   <a href="http://google.com" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a>

    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">Sub List 1</a>
        </li>
        <li>
            <a href="#">Sub List 2</a>
        </li>
    </ul>
</div>

@unicorn2 no its not working in my local environment – user2281858 Dec 06 '15 at 20:21 — user2281858, Dec 06 '15 at 20:21

score 14 · Accepted Answer · edited May 23 '17 at 12:32

14

From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):

To keep URLs intact with link buttons, use the data-target attribute instead of href="#".

So your code should be

 <a data-target="http://www.google.es"  target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>

<ul class="dropdown-menu" role="menu">
    <li>
        <a href="#">Sub List 1</a>
    </li>
    <li>
        <a href="#">Sub List 2</a>
    </li>
</ul>

Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click

edited May 23 '17 at 12:32

Community

1
1

answered Dec 06 '15 at 20:23

caballerog

2,679
1
19
32

Can I update the URL on the same page and not open a new tab? – user2281858 Dec 06 '15 at 20:44
1

Yes, I used target="_blank" because in fiddle doesn't work the iframe. Only remove target attribute. – caballerog Dec 06 '15 at 20:47
You also should remove `data-toggle="dropdown"`. Then it will work well. (Tested on Bootstrap 4.4.1) – laze Jan 26 '20 at 10:23

score 10 · Answer 2 · answered Jul 10 '17 at 20:24

A simple jQuery solution:

$('#menu-main > li > .dropdown-toggle').click(function () {
    window.location = $(this).attr('href');
});

But the better solution is to replace the data-toggle attribute with data-hover

So your final code will be:

<div class="btn-group">
   <a href="http://google.com" class="btn btn-default dropdown-toggle" data-hover="dropdown">Lists</a>

    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">Sub List 1</a>
        </li>
        <li>
            <a href="#">Sub List 2</a>
        </li>
    </ul>
</div>

Happy to help @BartSabayton! If you think it's appropriate, please mark this answer as the accepted solution. — Allure Web Solutions, Feb 08 '18 at 19:08

score 1 · Answer 3 · answered Mar 21 '22 at 18:01

1

Remove: data-toggle="dropdown" It's work for me.

answered Mar 21 '22 at 18:01

calaxan

21
3

href not working on dropdown-toggle - bootstrap

3 Answers3