在引导下拉菜单中悬停时显示活动的父菜单项

Posted 2023-05-08

【中文标题】在引导下拉菜单中悬停时显示活动的父菜单项

【英文标题】：Show the active parent menuitem on hover in bootstrap dropdpwn menu

【发布时间】：2018-04-30 22:45:24

【问题描述】：

我在 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 网站，我没有更改其中的任何内容。

【参考方案1】：

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

将此代码 sn-p 添加到您的 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>

【讨论】：

您好！谢谢，我会尽快回信，但我认为它会起作用。