时间戳

首页 > 解决方案 > 当用户将鼠标悬停快速移动到下拉菜单时，下拉菜单在引导程序中闪烁

javascript - 当用户将鼠标悬停快速移动到下拉菜单时，下拉菜单在引导程序中闪烁

问题描述

我的网站中有一个引导菜单，当用户将鼠标悬停在任何项目上时，在导航栏中会显示一个下拉菜单，并且在主下拉菜单中再次有一个项目的子下拉菜单：

在此处输入图像描述

正如您在图像中看到的那样。

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Entertainment </a>
  <ul class="dropdown-menu animated">
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/stage_shows">Stage Shows</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/game_stalls">Game Stalls</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/entertainment_stalls">Entertainment Stalls</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/special_effects">Special Effects</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/mascots">Mascots</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/photo_&_video">Photo & Video</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/sound">Sound</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/rentals">Rentals</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/tent_wala">Tent Wala</a></li>
    <li><a href="https://www.booktheparty.in/kids_party-planner/entertainment/MQ/makeup_artists">Makeup Artists</a></li>
  </ul>
</li>

这是带有子下拉列表的主下拉列表中的项目的示例 HTML。当用户慢慢将光标移动到子下拉菜单时，一切都很好，但是如果用户突然将光标移动到子下拉菜单，它会闪烁很多。我尝试使子下拉菜单靠近其父级，但闪烁仍然没有改变。

这是实时链接，请在此处输入链接描述， 任何人都可以告诉我这里可能出了什么问题，或者如何解决它，这会很棒。提前致谢。

标签： javascripthtmljquerycssbootstrap-4

解决方案

包含“其他事件” li 的主导航栏，单击时打开覆盖主导航栏的辅助导航栏，导致闪烁，因为它无法识别您选择的导航栏-：

尝试选择另一个打开过渡到辅助导航栏或增加主导航栏和辅助导航栏的填充。

希望它有效！干杯

推荐阅读