javascript - 在 Bootstrap 下拉菜单中悬停时显示事件父菜单项

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>