68

我们已经设置了 twitter 引导下拉菜单以在悬停时工作（而不是单击 [是的，我们知道触摸设备上没有悬停]）。但是我们希望能够在单击主链接时使其工作。

默认情况下，twitter bootstrap 会阻止它，那么我们如何重新启用它呢？

4

8 回答 8

122

只需在锚上添加disabled作为类：

<a class="dropdown-toggle disabled" href="http://google.com">
    Dropdown <b class="caret"></b></a>

所以所有这些都是这样的：

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://google.com">
            Dropdown <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
</ul>
于 2012-09-29T14:19:59.853 回答
12

由于没有真正有效的答案（选择的答案禁用下拉菜单），或者使用 javascript 覆盖，所以这里是。

这是所有 html 和 css 修复（使用两个<a>标签）：

<ul class="nav">
 <li class="dropdown dropdown-li">
    <a class="dropdown-link" href="http://google.com">Dropdown</a>
    <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
 </li>
</ul>

现在这是您需要的 CSS。

.dropdown-li {
    display:inline-block !important;
}
.dropdown-link {
    display:inline-block !important; 
    padding-right:4px !important;
}
.dropdown-caret {
    display:inline-block !important; 
    padding-left:4px !important;
}

假设您希望两个<a>标签在悬停任一标签时突出显示，您还需要覆盖引导程序，您可以使用以下方法：

.nav > li:hover {
    background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
    color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
    color: black; /*dropdown item text color*/
}
于 2015-01-22T22:41:57.680 回答
11

对于那些抱怨“子菜单不下拉”的人，我以这种方式解决了它，这对我来说看起来很干净：

1) 除了你的

<a class="dropdown-toggle disabled" href="http://google.com">
     Dropdown <b class="caret"></b>
</a>

放一个新的

<a class="dropdown-toggle"><b class="caret"></b></a>

并删除<b class="caret"></b>标签，所以它看起来像

<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>

2) 使用以下 css 规则为它们设置样式：

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

.caret1 类中的样式用于将其绝对定位在您的li, 在右上角。

第二种样式是在下拉列表的右侧添加一些填充以放置插入符号，以防止菜单项的文本重叠。

现在你有一个很好的响应式菜单项，它在桌面和移动版本中看起来都很不错，并且它既可点击又可下拉，具体取决于你是点击文本还是插入符号。

于 2014-07-04T21:40:25.960 回答
4

我不确定使顶级锚元素成为可点击锚的问题，但这是使桌面视图具有悬停效果和保持其可点击性的移动视图的最简单解决方案。

// Medium screens and up only
@media only screen and (min-width: $screen-md-min) {
    // Enable menu hover for bootstrap
    // dropdown menus
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

这样，移动菜单仍然可以正常运行，而桌面菜单将在悬停而不是单击时展开。

于 2016-01-28T21:31:06.993 回答
2

另一种解决方案是从锚点中删除“下拉切换”类。此点击后将不再触发 dropwon.js，因此您可能希望子菜单在悬停时显示。

于 2014-02-02T17:57:50.030 回答
1

您可以使用 javascript 代码段

$(function()
{
    // Enable drop menu clicks
    $(".nav li > a").off();
});

这将取消绑定单击事件，防止 url 更改。

于 2016-08-29T08:38:49.427 回答
0

这是一个根据屏幕宽度从数据悬停切换到数据切换的小技巧：

/**
 * Bootstrap nav menu hack
 */
$(window).on('load', function () {
    // On page load
    if ($(window).width() < 768) {
        $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
    }

    // On window resize
    $(window).resize(function () {
        if ($(window).width() < 768) {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown');
        } else {
            $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown');
        }
    });
});
于 2017-07-10T20:28:13.740 回答
0

这可以通过添加两个链接来更简单地完成，一个带有文本和 href，一个带有下拉列表和插入符号：

<a href="{{route('posts.index')}}">Posts</a>
<a href="{{route('posts.index')}}" class="dropdown-toggle" data-toggle="dropdown" role="link" aria-haspopup="true" aria- expanded="false"></a>
<ul class="dropdown-menu navbar-inverse bg-inverse">
    <li><a href="{{route('posts.create')}}">Create</a></li>
</ul>

现在您单击插入符号作为下拉菜单和链接作为链接。不需要css或js。我使用Bootstrap 4 4.0.0-alpha.6，不需要定义插入符号，它看起来没有 html。

于 2018-04-25T15:52:23.933 回答