允许点击 twitter bootstrap 下拉切换链接？

Question

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

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

Answer 1

只需将 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>

Answer 2

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

Answer 3

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

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 内，在右上角。

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

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

Answer 4

由于没有真正有效的答案（选择的答案会禁用下拉菜单），或者使用 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*/
}

Answer 5

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

// 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;
    }
}

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

Answer 6

你可以使用 javascript 代码片段

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

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

Answer 7

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

/**
 * 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');
        }
    });
});

Answer 8

这可以通过添加两个链接来更简单地完成，一个带有文本和 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。