允许点击twitter bootstrap下拉切换链接？-Java 学习之路

我们设置了twitter bootstrap下拉列表来处理悬停（而不是点击[是的，我们知道没有悬停在触摸设备上]） . 但是我们希望能够在点击它时使主链接工作 .

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

8 回答

只需在锚点上添加 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>

回复于 2024-04-27T13:07:47+08:00

2
对于那些抱怨“子菜单不下降”的人，我这样解决了，看起来很干净：

1）除了你的
```
<a class="dropdown-toggle disabled" href="http://google.com">
 Dropdown 
</a>
```
把一个新的
```
<a class="dropdown-toggle"></a>
```
并删除  标记，因此它看起来像
```
<a class="dropdown-toggle disabled" href="http://google.com">
Dropdown</a><a class="dropdown-toggle"></a>
```
2）使用以下css规则对它们进行样式设置：
```
.caret1 {
 position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
 padding-right: 40px;
}
```
.caret1类中的样式用于将其绝对定位在右下角的 li 中 .

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

现在你有一个很好的响应式菜单项，它在桌面和移动版本中看起来都不错，并且可点击和可下拉，具体取决于你是单击文本还是插入符号 .
回复于 2024-04-27T13:07:47+08:00

由于没有真正的答案可行（选择的答案禁用下拉列表），或使用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> 标记在悬停任何一个时突出显示，您还需要覆盖bootstrap，您可以使用以下内容：

.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*/
}

回复于 2024-04-27T13:07:47+08:00

0
我不确定将顶级锚元素作为可点击锚点的问题，但这是使桌面视图具有悬停效果的最简单的解决方案，以及保持其点击能力的移动视图 .
```
// 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;
    }
}
```
这样，移动菜单仍然可以正常运行，而桌面菜单会在悬停时而不是点击时展开 .
回复于 2024-04-27T13:07:47+08:00
1

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

回复于 2024-04-27T13:07:47+08:00
0
你可以使用javascript snippit
```
$(function()
{
    // Enable drop menu clicks
    $(".nav li > a").off();
});
```
这将解除阻止URL更改的单击事件的绑定 .
回复于 2024-04-27T13:07:47+08:00

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

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

回复于 2024-04-27T13:07:47+08:00

121
这可以通过添加两个链接来简化，一个包含text和href，另一个包含dropdown和caret：
```
<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 .
回复于 2024-04-27T13:07:47+08:00

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

8 回答

相关问题