我在 http://plushdesign.net/plush5/contact/ 有一个包含一个子菜单的移动菜单.出于某种原因,它已停止在移动设备上点击扩展(在网站的所有页面上——我正在使用此页面,因为它没有任何 js)。
基本的 html(为简单起见进行了修剪)是:
<ul id="primary-main-menu" class="menu" style="display: block;">
<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
<li id="menu-item-1901" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1901 hover">
<a class="parent" href="http://plushdesign.net/plush5/work/">Work</a>
<ul class="sub-menu">
<li id="menu-item-2105" class="hide menu-item menu-item-type-post_type menu-item-object-page menu-item-2105">
<li id="menu-item-2104" class="hide menu-item menu-item-type-post_type menu-item-object-page menu-item-2104">
</ul>
</li>
</ul>
相关的CSS是:
#primary-main-menu li.hide,
ul#primary-main-menu.menu li.hover ul.sub-menu li.hide {
visibility: visible;
}
#primary-main-menu > li.hover > ul,
#primary-main-menu li li.hover > ul,
#primary-main-menu li:hover ul,
#primary-main-menu li.hover a ul {
display: block !important;
position: static !important;
visibility: visible !important;
}
我到处查看并尝试了我能想到的所有选择器组合,但找不到它停止下降的原因...有人可以帮忙吗?谢谢。
最佳答案
您的 mobile-menu.js
中似乎存在一个问题,即未在 li
项中切换类 hide
.sub-menu
,当点击.parent
时。它应该与点击时在 .menu-item
中切换的 .hover
类同步。
尝试从浏览器检查器中手动删除每个子项中的 hide
类,它起作用了。
有点像
$("#primary-main-menu li a.parent").unbind('click').bind('click', function(e) {
e.preventDefault();
$(this).parent("li").toggleClass("hover");
$(this).next('.sub-menu').find('li').toggleClass("hide") // <<< line added
});
关于css 移动子菜单不会在点击时展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36535366/