Wordpress 在点击时显示子导航答案

【问题标题】：Wordpress show sub navigation on clickWordpress 在点击时显示子导航
【发布时间】：2017-06-21 09:19:20
【问题描述】：

我有默认的 wordpress 菜单，它在悬停时显示子导航链接，但我只想在用户单击父链接时显示子导航。你可以在这里看到我的菜单https://jsfiddle.net/foley13/83sk1p1x/

我有一个小 javascript 应该可以做到这一点，但不工作。

$(function(){
   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
});

我不知道 CSS 是否阻止了这项工作，但我只想删除悬停并点击。

【问题讨论】：

标签： javascript jquery css wordpress

【解决方案1】：

您在使用 li:has(ul) 时遇到问题。只需将类“下拉”添加到这些具有下拉列表的 li。 ;)

【讨论】：

【解决方案2】：

这是对我有用的代码，我在 jsFiddle 中打开了 jQuery：

https://jsfiddle.net/83sk1p1x/2/

(function(){
   //Hide all the sub menus

   $('li.menu-item-has-children').hover(function(){
    $('li.menu-item-has-children').children("ul.sub-menu").css({"display":"none"});
    return;
   });

   $("li.menu-item-has-children").click(function(e){
        e.preventDefault();
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
})();

但是，在 WordPress 中（由于 jquery 的 $ 存在问题），您必须以这种方式编写函数：

(function($){ ...
  // code
}(jQuery);

【讨论】：

【解决方案3】：

试试这个

脚本

$(function(){
   $("li:has(ul)").click(function(){
      $(this).toggleClass("hover");
   });
});

在css 中，您需要将:hover 替换为.hover Check working fiddle

【讨论】：

太好了，我已经收藏了以备将来参考。

【解决方案4】：

感谢您的帮助，但我设法通过保留原始脚本解决了我的问题：

$(function(){
   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle('fast');
      $(this).toggleClass("down");
   });
});

但我删除了左边：-999em;来自 .sub-menu 和 .sub-menu ul，这解决了悬停问题

【讨论】：