将鼠标悬停在其中一个菜单上时，菜单栏会在 wordpress 中一起显示所有子菜单

问题描述

导航栏由三个菜单组成，这些菜单有更多的子菜单。有时会发生当其中一个菜单被悬停时，当悬停在菜单区域之外时它不会消失，从而导致显示多个子菜单。 以下是正在发生的事情的屏幕截图 Screenshot of the Glitch

我观察到这种情况主要发生在用户错误地点击父菜单而不是悬停时。

下面是菜单的html标签

           <nav class="main-menu hidden-xs">
                <ul id="menu-primary-3" class="nav"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-33 active"><a title="HomePage" href="">Homepage</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Client Registeration" href="#">Client Registeration</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a title="Send Email" href="#">Send Email</a></li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-190 dropdown"><a title="Cases" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Cases<span class="caret"></span></a>
             <ul role="menu" class=" dropdown-menu">
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-193"><a title="Create Case" href="https://afaflawmgt.com/cases/">Create Case</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a title="Create new sessions" href="#">Create new sessions</a></li>
              <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"><a title="View Report" href="https://afaflawmgt.com/cases/view-report/">View Report</a></li>
             </ul>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42 dropdown"><a title="Appointments" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Appointments<span class="caret"></span></a>
                 <ul role="menu" class=" dropdown-menu">
                     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a title="Create" href="#">Create</a></li>
                     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a title="View" href="#">View</a></li>
                </ul>
         </li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a title="Payment" href="#">Payment</a> 
         </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-148 dropdown"><a title="Welcome" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Welcome <span class="caret"></span></a>
             <ul role="menu" class=" dropdown-menu">
                  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a title="Create User Account" href="#">Create User Account</a></li>
                  <li class="menu-item menu-item-type- menu-item-object-logout menu-item-150"><a title="Log Out" href="#">Log Out</a></li>
              </ul>
        </li>
               </ul>                
        </nav>

下面是Javascript代码

  $('.ul#menu-primary-3.nav a.dropdown-toggle').click(function (e) {
  // remove the active class with every click
  var same = $(this).hasClass('active');
  var siblings = $(this).parent('.menu-item').parent().children();
  siblings.find('a.active + .dropdown').slideUp();
  siblings.find('a').removeClass('active'); 

if ($(this).next().hasClass('.dropdown') && !same) {
    e.preventDefault();
    $(this).addClass('active');
    $(this).next('.dropdown').slideDown();
});



  });

上面的代码没有按预期工作

有人可以建议正确的方法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）