javascript - How to remove preventDefault behaviour of Bootstrap dropdown - Stack Overflow

admin管理员组

文章数量:1410730

I'm using Bootstrap 3 dropdown menu in my markup. But other than the default behaviour, it should pop out if I'm hovering the elements. So I created a small script:

jQ('.dropdown').hover(function() {
    jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
}, function() {
    jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
});

which is working fine. But for some reason the Bootstrap dropdown prevents redirecting to another page when I want to have the first item (which triggers the hover) as a link. I'm clicking on the link and nothing happens, it only appends a class .open. I only can open the link if I do a right click and select open destination in new tab. How can I fix this?

Thanks

I'm using Bootstrap 3 dropdown menu in my markup. But other than the default behaviour, it should pop out if I'm hovering the elements. So I created a small script:

jQ('.dropdown').hover(function() {
    jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
}, function() {
    jQ(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
});

which is working fine. But for some reason the Bootstrap dropdown prevents redirecting to another page when I want to have the first item (which triggers the hover) as a link. I'm clicking on the link and nothing happens, it only appends a class .open. I only can open the link if I do a right click and select open destination in new tab. How can I fix this?

Thanks

• javascript
• jquery
• html
• twitter-bootstrap-3

Share Improve this question Follow asked Feb 17, 2015 at 16:57 supersizesupersize 14.9k1919 gold badges8585 silver badges144144 bronze badges 5

• Implement the onclick of the a as: document.location.href=this.href. Does that work? – Halcyon Commented Feb 17, 2015 at 16:59
• What's with the cute jQ? :) – Jeremy Thille Commented Feb 17, 2015 at 17:00
• You can bind any element to a redirection click : $(".whatever").click( function(){ window.location='some/url'; }) – Jeremy Thille Commented Feb 17, 2015 at 17:03
• @JeremyThille haha, its for noConflict(), any new suggestions? ;) – supersize Commented Feb 17, 2015 at 17:04
• @Halcyon I don't want necessarily use jQuery, just want to know what causes this issue. – supersize Commented Feb 17, 2015 at 17:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Simply remove data-toggle="dropdown" attribute from the button (I suppose it's anchor tag):

<a class="btn btn-default dropdown-toggle" href="http://somewhere" target="_blank" id="dropdownMenu1" >
    Dropdown
    <span class="caret"></span>
</a>

JSFiddle

---

data-toggle attribute is an indicator for bootstrap, that an event should be bind to the element, depends on the attribute value:

data-toggle="dropdown"
data-toggle="tooltip"
data-toggle="modal"
data-toggle="popover"
data-toggle="tab"
data-toggle="collapse"
data-toggle="button"

NOTE: You may have a problem on mobile devices with the "click open link" scenario.

本文标签： javascriptHow to remove preventDefault behaviour of Bootstrap dropdownStack Overflow