导航栏折叠后禁用悬停效果

Question

我有一个 bootstrap 带有下拉菜单按钮的导航栏，当它们悬停在上面时会自动下拉。但是，当菜单折叠时（达到 768px 时），我想禁用此悬停效果，以便只有在单击按钮时菜单才会下拉。

我尝试了一些没有用的东西。现在我正在尝试使用媒体查询来禁用悬停效果，但我不确定如何进行。任何建议将不胜感激！

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

@media (max-width: 767px) 
{
    .navbar-fixed-top
    {
        position: relative;
        top: auto;
    }

 .dropdown:hover .dropdown-menu {
    /*disable the display:block; property*/
    }
}

编辑：Here's a bootply 我正在使用的代码。如果您单击显示屏右上角的移动图标，您将能够看到栏在折叠菜单时的反应。

Answer 1

您可以更改媒体查询中该规则的显示值，不确定您想要的是什么，但可能 inline 或 inline-block（或 none 如果你根本不想让 .dropdown-menu 显示):

@media (max-width: 767px) 
{
    .dropdown:hover .dropdown-menu {
        display: none;
    }
}

没有 "disabling" 规则的属性这样的东西，但是，您可以将其更改为另一个值，如我在此处显示的示例。

Answer 2

我相信您需要做的就是将您的悬停规则设置为仅在 767px 以上有效，然后移动导航栏将按照默认规则运行。

查看工作示例。

我添加的一件事是 navbar 的自定义 class（示例中的 navbar-custom 或者如果你走这条路的话任何有意义的东西）所以核心是'直接覆盖。这并不是所有工作都需要的，只是我觉得的最佳实践。

@media (min-width: 767px) {
  .navbar-custom .dropdown:hover .dropdown-menu {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-custom navbar-fixed-top">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button> <a href="~/" class="navbar-brand title-link">Gateway Ranch</a>

  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse centeredText">
    <ul class="nav navbar-nav centeredText">
      <li><a href="~/Home/Contact">Contact</a>

      </li>
      <li><a href="#">Profile</a>

      </li>
      <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="~/Horse/">Horses<b class="caret"></b></a>

        <ul role="menu" class="dropdown-menu">
          <li><a href="~/Horse/">For Sale</a>

          </li>
          <li><a href="#">Brood Mare</a>

          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

导航栏折叠后禁用悬停效果

Disabling hover effect after navbar collapses

css

navbar

twitter-bootstrap