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

I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).

我已经在我的Wordpress主题上设置了Bootstrap 3,并且我已经在移动设备上正确运行了子菜单(灰色箭头表示它是一个点击时打开的下拉菜单)。

On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.

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

2 个解决方案

#1

I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.

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

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

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

#2

You can use Jquery hover to activate the drop-down

您可以使用Jquery悬停来激活下拉列表

Try this

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

DEMO

#1

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

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

#2