切换链接下拉不工作

Question

我使用下面的jQuery来创建一个下拉切换效果我侧菜单（链接：http://wp.gattoweb.com/gattotestfour/）

jQuery(document).ready(function(){ 
    jQuery('.site-navigation ul ul').hide(); 
    if(jQuery('.menu-item-has-children').length > 0) { 
     jQuery('.menu-item-has-children').click(function(event) { 
      jQuery(this).addClass('toggled') 
      if(jQuery('.menu-item-has-children').hasClass('toggled')) 
      { 
       jQuery(this).children('ul').toggle(); 
      } 

      return false; 
     }); 
    } 
}); 

这似乎是做了切换效果的工作，但当我尝试点击其中一个下拉链接时，菜单消失并且不会进入链接页面。

Answer 1

试试这个作为一个完整的更换你的脚本：

$(document).ready(function(){ 
     $('.sub-menu').hide(); 
     $('.menu-item-has-children').click(function() { 
      var $this = $(this); 
      $this.find('.sub-menu').slideToggle(); 
      $this.find('.sub-menu').click(function(e) { 
      e.stopPropagation(); 
      }); 
     }); 
    }); 

*编辑* 另外，我想补充他下面的CSS和删除此脚本的第一行：

.sub-menu { 
    display: none; 
} 

如果它不在那里，那很好。

最后，还有设计决定的问题。你想要“婚礼”触发子菜单或进入婚礼页面吗？现在，它将在婚礼页面加载时加载子菜单，但您的访客永远不会真的有机会看到您的订婚组合。

也许尝试使用“Portfolios”的wordpress管理员中的链接网址“Portfolios”的自定义链接，然后将婚礼移动到其下的儿童位置。

下面是一个修复的小提琴：https://jsfiddle.net/cr46nekL/1/