Wordpress - 点击时自动关闭移动菜单

Posted 2023-03-31

【中文标题】Wordpress - 点击时自动关闭移动菜单

【英文标题】：Wordpress - automatically close mobile menu on click

【发布时间】：2018-07-17 08:47:57

【问题描述】：

真的希望你能帮忙。我正在使用 Wordpress 构建一个基本网站来推广我的新业务。我相当精通技术，但我不是开发人员，我只能真正使用 CSS 和一点 html。

我遇到了一个问题，我的网站的移动菜单在选择时没有关闭，这真的很烦人。我的网站可以看到here。

我进入了 Wordpress 的编辑器，发现了一段代码（完全猜测）可能控制移动菜单的点击：

jQuery(document).ready(function($)
  $(".site-nav-toggle").click(function()
    $(".site-nav").toggle();
 );  

 $('.main-nav > li ').click(function()
     $('.main-nav > li ').removeClass('current');
      var css_class = $(this).attr("class");
      $('.'+css_class.replace(/\ +/g,".") ).addClass('current');
     );

谁能帮我找出问题并告诉我他们是否认为他们有解决办法？

非常感谢您能给我的任何帮助。

【参考方案1】：

$('.main-nav > li ').click(function() 
  $('.main-nav > li ').removeClass('current');
  var css_class = $(this).attr("class");
  $('.' + css_class.replace(/\ +/g, ".")).addClass('current');
  $(".site-nav").fadeOut(); //At this point you can fade out the menu
);

【讨论】：

谢谢亚历克斯。那么我是否直接用您的代码替换当前的代码？或者是额外的？道歉，但真的超出了我的深度！

$(".site-nav").fadeOut(); 是一个新行。您可以将其添加到您的代码中。或者你可以用这个替换点击功能。

谢谢，稍后会试一试，并会通知您！

不幸的是，没有运气，感谢亚历克斯的回复。无论我将其添加为新行还是替换单击功能，菜单仍然显示为打开状态。

Alex - 我怀疑您的代码可能有效，但我遇到了缓存问题。非常感谢您的意见！

【参考方案2】：

试试这个。

$('.main-nav > li ').click(function()
   $('.site-nav').slideUp() 
);

【讨论】：

谢谢。这段代码是对已有代码的补充还是作为替代？

欢迎。您必须在点击功能$('.main-nav > li ').click(function() $('.site-nav').slideUp() ; );中添加此行$('.site-nav').slideUp() ;

我试过用这段代码替换当前的点击功能，不幸的是它不起作用。

您不必替换代码。您必须添加此行 $('.site-nav').slideUp(); 。我已经在控制台中应用了它。这是工作。

嗯，奇怪。这就是代码现在的样子： jQuery(document).ready(function($) $(".site-nav-toggle").click(function() $(".site-nav").toggle (); ); $('.main-nav > li ').click(function() $('.site-nav').slideUp() ); 这样看起来对吗？

【参考方案3】：

Ankita 发布的代码似乎运行良好。感谢大家的帮助！

 $('.main-nav > li ').click(function()
    $('.site-nav').slideUp() 
     );