如何在悬停而不是单击时创建Twitter Bootstrap“拆分按钮下拉列表”下拉菜单?

时间:2012-05-25 00:42:28

标签: css drop-down-menu twitter-bootstrap

我正在使用Twitter Bootstrap split button dropdown。如果它悬停在上面而不是单击箭头时如何让它下拉?

这类似于this previous question,但是对于不同的Twitter Bootstrap元素。

2 个答案:

答案 0 :(得分:4)

此解决方案与链接中的问题几乎相同。您需要将一些CSS添加到:hover伪选择器,它将显示下拉列表。悬停元素必须包含按钮和下拉列表。在下面的示例中,我将btn-hover类添加到按钮组以充当我的悬停选择器。

        <div class="btn-group btn-hover">
          <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Action
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">Test</a></li><!-- dropdown menu links -->
            <li><a href="#">Test 2</a></li><!-- dropdown menu links -->
          </ul>
        </div>

CSS:

div.btn-group:hover ul.dropdown-menu{
    display: block;    
}

div.btn-group ul.dropdown-menu{
    margin-top: 0px;    
}

答案 1 :(得分:0)

将此代码用于更大的设备悬停效果和更小的设备点击效果:

$(document).ready(function(){

  $('.dropdown').append("<style type='text/css'>@media screen and (min-width: 768px) { .dropdown:hover .dropdown-menu {display: block;} }</style>"); 

});