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

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

默认情况下，twitter引导程序会阻止它，那么如何重新启用它呢？

只需在您的锚点上将禁用添加为一个类：

<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>

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

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的右上角。

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

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

由于实际上并没有一个有效的答案（选择的答案会禁用下拉列表），或者使用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*/
}

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

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

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

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

您可以使用JavaScript代码段

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

这将取消绑定click事件，从而防止url更改。

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

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

可以通过添加两个链接来简化此操作，一个链接带有文本和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。