css 移动子菜单不会在点击时展开

Question

我在 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;
}

我到处查看并尝试了我能想到的所有选择器组合，但找不到它停止下降的原因...有人可以帮忙吗？谢谢。

Answer 1

您的 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
});