Wordpress网站-移动菜单行为帮助

Question

希望你能帮忙。所以，我使用的是x主题和wordpress。我有代码使我的移动菜单成为固定的顶部菜单，所以它总是可见的。我还拥有JavaScript，使它在单击菜单项时收回，这样菜单就不会覆盖屏幕。

css使其固定：

@media (max-width: 979px) {
  .x-navbar-fixed-top {
    position: fixed!important;
  }
}

Javascript：

jQuery(document).ready(function($){
    $('.x-navbar .mobile .x-nav >').on('click touchend', function(e) {
        document.getElementsByClassName("x-btn-navbar")[0].click()
    });
});

但是，如果您转到这个页面：https://foresthillcentre.com/mental-health-services/，这在某种程度上是可行的。

然后在所有的子菜单项目上尝试菜单(设置为滚动到同一页面上的部分)，菜单在你点击任何东西之前都会收缩，你必须重新点击汉堡包来打开子菜单。你会明白我的意思.

有什么解决办法吗？

谢谢。

Answer 1

CSS不是罪魁祸首，您的jQuery逻辑存在一个问题。基于提供的jQuery，看起来您将根据类名绑定单击事件。

我建议将触发初始导航下拉列表的单击事件绑定到汉堡包图标的ID而不是类。然后绑定一个单独的单击事件，该事件触发下拉列表。

导航和子菜单下拉列表似乎都有相同的属性：data-x-toggleable="x-nav-wrap-mobile"，这可能是问题的原因。