如何解决将鼠标悬停在其中一个菜单上时,菜单栏会在 wordpress 中一起显示所有子菜单
导航栏由三个菜单组成,这些菜单有更多的子菜单。有时会发生当其中一个菜单被悬停时,当悬停在菜单区域之外时它不会消失,从而导致显示多个子菜单。 以下是正在发生的事情的屏幕截图 Screenshot of the Glitch
我观察到这种情况主要发生在用户错误地点击父菜单而不是悬停时。
<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 举报,一经查实,本站将立刻删除。