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.
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>
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
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>
删除:data-toggle="dropdown" 这对我有用。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.