允许点击Twitter的引导下拉肘杆？(Allow click on twitter bootstr

我们已经建立了Twitter的引导下拉列表悬停工作（而不是点击[是的，我们都知道在触摸设备上无悬停]）。 但是，我们希望能够有重要环节的工作，当我们点击它。

默认情况下，Twitter的引导块，所以我们如何才能重新启用它？

Answer 1:

只需添加禁用作为你的锚类：

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

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

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

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

现在你有这看起来既在桌面和移动版本不错，既可以点击的，dropdownable取决于你是否点击文字或插入符一个很好的响应菜单项。

Answer 3:

由于没有真正的作品（选择的答案禁用下拉菜单），或覆盖使用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 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;
    }
}

这样，移动菜单仍然表现为它应该，而桌面菜单上悬停，而不是在点击后展开。

Answer 5:

另一种解决方案仅仅是从锚卸下“下拉肘节”类。 这个点击后，将不再触发dropwon.js，所以你可能希望有子菜单显示悬停。

Answer 6:

你可以使用JavaScript SNIPPIT

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

这将解除绑定click事件阻止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需要。 我用引导4 4.0.0-alpha.6，定义插入符号是没有必要的，它没有出现在HTML。

文章来源: Allow click on twitter bootstrap dropdown toggle link?