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

Question

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

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

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的右下角.

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

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

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