Question

我已经在我的Wordpress主题上设置了Bootstrap 3，并且我的子菜单在移动设备上正常工作（灰色箭头表示它是一个点击打开的下拉菜单。）

在桌面上我希望下拉列表在没有箭头图像的情况下悬停工作。有没有办法在不影响移动布局的情况下做到这一点？见this。

Answer 1

我明白了，你不希望用户在桌面上看到“插入符号”。这可以通过最少量的媒体查询来实现。它应该是这些方面的东西。我从Bootstrap 3 Docs获得了桌面断点媒体查询代码。

@media (min-width: 1200px) {
  .navbar-nav .caret {
  display:none;
 }

 .dropdown:hover .dropdown-menu {
   display: block;
  }
}

Answer 2

您可以使用Jquery hover激活下拉列表

试试这个

$(document).ready(function() {
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
    if($(window).width() > 750)
    {
    $('b.caret').hide() 
    }
});

DEMO

如何在Bootstrap 3菜单上删除插入符并在悬停时显示下拉列表？

2 个答案: