javascript - href 不适用于下拉切换 - bootstrap

标签 javascript html css twitter-bootstrap

我不明白为什么 href 不能处理 data-toggle="dropdown"a 标签。当我点击 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>

最佳答案

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

To keep URLs intact with link buttons, use the data-target attribute instead of 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

关于javascript - href 不适用于下拉切换 - bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34122048/

相关文章:

javascript - Webpack,加载本地字体时遇到问题

java - 在 Ubuntu 12.04 服务器和 Eclipse EE : servlet won't run a class file 上使用 Tomcat 7

javascript - 如何为移动设备制作一个无论页面缩放如何都保持相同大小的 CSS 菜单?

html - 为什么这是内联的?

javascript - CSS三 Angular 形用Javascript改变显示值

css - 将文本和图像放在不同的行中

javascript - Braintree dropin 表单问题 - 未生成随机数字符串

javascript - 获取可靠的网站屏幕截图? Phantomjs 和 Casperjs 在某些网站上都返回空屏幕截图

javascript - 是否可以使 HTML 中的元素不遵循其父元素的 CSS Id?

javascript - DIVs点击事件错误触发其他DIVs点击事件