href无法处理dropdown-toggle - bootstrap

Question

我不明白为什么href不在a标签上工作data-toggle="dropdown".当我点击Lists标签时,我应该被路由到google网站.

骗子在这里

简单的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>

Answer 1

从Bootstrap文档(http://getbootstrap.com/javascript/#dropdowns):

要使用链接按钮保持URL不变,请使用data-target属性而不是href ="#".

所以你的代码应该是

 <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>

此外,您可以找到有关如何使用悬停而不是单击来获取菜单下拉列表的更多信息:如何在悬停而不是单击时使Twitter引导菜单下拉列表

Answer 2

一个简单的jQuery解决方案：

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

但是更好的解决方案是将data-toggle属性替换为data-hover

因此，您的最终代码将是：

<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>