href 不适用于下拉切换 - 引导

Posted 2023-03-06

【中文标题】href 不适用于下拉切换 - 引导

【英文标题】：href not working on dropdown-toggle - bootstrap

【发布时间】：2016-03-11 09:00:53

【问题描述】：

我不明白为什么 href 不能处理 a 的 data-toggle="dropdown" 标记。当我点击Lists 标签时，我应该被路由到google 网站。

FIDDLE HERE

简单的 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 不，它在我的本地环境中不起作用

【参考方案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>

此外，您可以找到有关如何使用悬停而不是单击来获取菜单下拉菜单的更多信息：How to make twitter bootstrap menu dropdown on hover rather than click

【讨论】：

我可以在同一页面上更新网址而不打开新标签吗？

是的，我使用了 target="_blank" 因为在 fiddle 中 iframe 不起作用。只删除目标属性。

您还应该删除data-toggle="dropdown"。然后它会很好地工作。 （在 Bootstrap 4.4.1 上测试）

【参考方案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>

【讨论】：

很高兴帮助@BartSabayton！如果您认为合适，请将此答案标记为已接受的解决方案。