Javascript href不使用下拉切换-引导

我不明白为什么

href

没有为

数据切换=“dropdown”

使用

标签。当我点击
列表
选项卡时，我应该被发送到
谷歌
网站


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








来自引导程序文档）：

要使用链接按钮保持URL的完整性，请使用数据目标属性
而不是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>










此外，您还可以找到有关如何使用鼠标悬停而不是单击来获取菜单下拉列表的更多信息：
一个简单的jQuery解决方案：

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

但更好的解决方案是将
数据切换
属性替换为
数据悬停

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

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








@unicorn2否它在我的本地环境中不起作用我可以更新同一页面上的URL而不打开新选项卡吗？是的，我使用了target=“\u blank”，因为在fiddle中，iframe不起作用。仅删除目标属性。还应删除
data toggle=“dropdown”
。那么它就会很好地工作。（在Bootstrap 4.4.1上测试）很乐意帮助@BartSabayton！如果您认为合适，请将此答案标记为可接受的解决方案。