我正在Magento 2和移动设备上构建一个网站,导航的前两个级别不会导航到那些页面,而只是作为点击目标在那里打开相应的子菜单。
我的代码大致如下结构
<ul id="ui-id-1" class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" tabindex="0">
<li class="level0 nav-3 has-active last level-top parent ui-menu-item open" role="presentation">
<a href="http://site.dev/shop.html" class="level-top ui-corner-all ui-state-active" aria haspopup="true" id="ui-id-4" tabindex="-1" role="menuitem">
<span>Shop</span>
</a>
<ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-expanded="true" style="display: block; position: relative; top: 90px; left: 0px;">
<li class="level1 nav-3-3 parent ui-menu-item" role="presentation">
<a href="http://site.dev/shop/accessories.html" aria-haspopup="true" id="ui-id-7" class="ui-corner-all" tabindex="-1" role="menuitem">
<span>Accessories</span>
</a>
<ul class="level1 submenu ui-menu ui-widget ui-widget-content ui-corner-all expanded" role="menu" aria-hidden="true" aria-expanded="false" style="display: none;">
//submenu code removed for brevity
</ul>
</li>
</ul>
</li>
</ul>
正如您在下面的代码中看到的那样,.level-top li和.level1 li都有jQuery单击事件,这些事件应该阻止a被跟随并打开子菜单。它们都打开了子菜单,但.level1点击事件没有禁用链接,随后又跟着它。
$(document).on('click', '.page-header li.level-top.parent>a', function(e){
e.preventDefault();
if($(this).parents('li.level-top').hasClass('open')){
$('li.level-top').removeClass('open');
}else{
$('li.level-top').removeClass('open');
$(this).parents('li.level-top').addClass('open');
}
});
$(document).on('click', '.page-header li.level1.parent>a', function(e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
if($(this).parents('li.level1').hasClass('open')){
$('li.level1').removeClass('open');
}else{
$('li.level1').removeClass('open');
$(this).parents('li.level1').addClass('open');
}
return false;
});
我已经尝试了一切,这让我疯狂。任何想法?