twitter-bootstrap href 不适用于下拉切换 - 引导程序

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34122048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:25:29  来源:igfitidea点击:

href not working on dropdown-toggle - bootstrap

javascripthtmlcsstwitter-bootstrap

提问by user2281858

I fail to understand why hrefis not working on atag for data-toggle="dropdown". When I hit the Liststab, i should be routed to the googlewebsite.

我不明白为什么hrefadata-toggle="dropdown". 当我点击Lists选项卡时,我应该被路由到该google网站。

FIDDLE HERE

在这里小提琴

Simple HTML:

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

回答by caballerog

From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):

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

To keep URLs intact with link buttons, use the data-target attribute instead of href="#".

要使用链接按钮保持 URL 完整,请使用 data-target 属性而不是 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

此外,您可以找到有关如何使用悬停而不是单击获取菜单下拉菜单的更多信息:如何在悬停而不是单击时制作 twitter bootstrap 菜单下拉菜单

回答by Allure Web Solutions

A simple jQuery solution:

一个简单的jQuery解决方案:

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

But the better solution is to replace the data-toggleattribute with data-hover

但更好的解决方案是将data-toggle属性替换为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>