Question

我在bootsrap中有一个简单的2级下拉导航，代码如下：

    <div class="collapse navbar-collapse" id="main-nav">
   <ul class="nav navbar-nav pull-left">
      <li><a href="/" title="Főoldal" class="top_menu_to_link">Főoldal</a></li>
      <li class="dropdown">
         <a href="#" title="Iskolánk" class="top_menu_to_link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Iskolánk</a>
         <ul class="dropdown-menu">
            <li><a href="/alapadatok" title="Alapadatok" class="submenu_link">Alapadatok</a></li>
            <li><a href="/" title="Még egy teszt menü" class="submenu_link">Még egy teszt menü</a></li>
            <li><a href="/osztalyok" title="Osztályok" class="submenu_link">Osztályok</a></li>
            <li><a href="/" title="Teszt menüpont valami" class="submenu_link">Teszt menüpont valami</a></li>
         </ul>
      </li>
      <li class="dropdown">
         <a href="#" title="Információk" class="top_menu_to_link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Információk</a>
         <ul class="dropdown-menu">
            <li><a href="/" title="Teszt, infók menüpontba" class="submenu_link">Teszt, infók menüpontba</a></li>
         </ul>
      </li>
      <li><a href="/arlista" title="Árlista" class="top_menu_to_link">Árlista</a></li>
      <li><a href="/hirek" title="Hírek" class="top_menu_to_link">Hírek</a></li>
      <li><a href="/kepgaleria" title="Képgaléria" class="top_menu_to_link">Képgaléria</a></li>
      <li><a href="/dokumentumok" title="Dokumentumok" class="top_menu_to_link">Dokumentumok</a></li>
      <li><a href="/kapcsolatfelvetel" title="Kapcsolatfelvétel" class="top_menu_to_link">Kapcsolatfelvétel</a></li>
   </ul>
</div>

我将此css添加到样式文件中，因为我想在悬停时显示子菜单，而不是单击导航项。

    .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }

当我点击“iskolánk”导航项并将光标移动到子菜单时，“Iskolánk”导航项将显示一个白色背景，显示我这是活动项目，并显示子菜单。

如果我没有单击“Iskolánk”导航项，只是将其悬停，子菜单会显示，但如果我将光标移动到子菜单，“Iskolánk”导航项将丢失白色背景，并且它不会显示这是活动的导航项目。

我该怎么做？我希望始终在悬停时显示子菜单，而不是单击父级。 bootstrap css和js文件来自bootstrap网站，我不会改变其中的任何内容。

Answer 1

问题是当您移动到子菜单时，光标离开菜单（父级），因此CSS悬停不起作用。因此，要解决此问题，您可以编写一个简单的jquery代码，当您移动到子菜单时，该代码可以将悬停效果保留在父级（菜单）上。但请记住，当您离开该子菜单时，您必须从父级中移除该效果。

将此代码段添加到HTML文件中。

<script type="text/javascript">
   $(document).ready(function(){
      $('.dropdown-menu').hover(function(){
         $(this).parent().css({background:'#eee'});
      })
      $('.dropdown-menu').mouseleave(function(){
         $(this).parent().css({background:'#fff'});
      })
   })
</script>

在bootstrap dropdpwn菜单中悬停时显示活动的父菜单项

1 个答案: