如何在悬停而不是点击时制作Twitter Bootstrap 'Split button dropdown'下拉列表？

2 回答

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

  回复于 2024-05-07T00:25:10+08:00
• 0

  使用此代码可获得更大的设备悬停效果和更小的设备点击效果：

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

  回复于 2024-05-07T00:25:10+08:00