WordPress的自定义导航，下拉标题不可点击

Question

我使用自定义wordpress菜单作为一个侧栏元素（侧视图在视觉作曲家布局）。

现在的问题是，整个框是一个触发器，用于打开下拉菜单，这意味着主项目链接永远不会被激活。

我希望只打开箭头来触发子菜单打开，但无法找到任何方法，因为箭头和菜单项文本处于相同的'ahref'中。

这迫使我在我的菜单中复制菜单项。 CSS语句：由WordPress

<li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-325 current_page_item menu-item-333"><a href="http://www.site.nl/link/" target="_blank">Dorp</a></li> 

向下箭头创建

标记是用一个 “后” 加入。

#PB .widget_nav_menu .menu-item-has-children a:after { 
    content: "\f107"; 
    font-family: FontAwesome; 
} 

代码，我THINK被asociated它

/** 
     * Custom menu widget toggles 
     * 
     * @since 2.0.0 
     */ 
     customMenuWidgetAccordion: function() { 
      var self = this; 

      // Open toggle for active page 
      $('.widget_nav_menu .current-menu-ancestor', self.config.$siteMain).addClass('active').children('ul').show(); 

      // Toggle items 
      $('.widget_nav_menu', self.config.$siteMain).each(function() { 
       var $hasChildren = $(this).find('.menu-item-has-children'); 
       $hasChildren.each(function() { 
        $(this).addClass('parent'); 
        var $links = $(this).children('a'); 
        $links.on('click', function(event) { 
         var $linkParent = $(this).parent('li'); 
         var $allParents = $linkParent.parents('li'); 
         if (! $linkParent.hasClass('active')) { 
          $hasChildren.not($allParents).removeClass('active').children('.sub-menu').slideUp('fast'); 
          $linkParent.addClass('active').children('.sub-menu').stop(true, true).slideDown('fast'); 
         } else { 
          $linkParent.removeClass('active').children('.sub-menu').stop(true, true).slideUp('fast'); 
         } 
         return false; 
        }); 
       }); 
      }); 

     }, 

一言以蔽之：我怎样才能让只有图标点击激活下拉菜单，使按钮发送其余我到正确的页面。

Answer 1

没有看到标记，我假设<a>是这样的？

<a href="page.html">Dorp <i class="arrow-down"></i></a> 

使用箭头向下作为箭头，你可以这样做：

$(document).ready(function(){ 
    $(document).on('click', function(e){ 
     if($(e.target).hasClass('arrow-down')){ 

       // If the target has the class 'arrow-down' preventDefault to stop normal behavior 
       e.preventDefault(); 

       // Function to display dropdown 

     } 
    }); 
}) 

你可以see it in action on this JsFiddle。

UPDATE：由于此箭头是在WordPress菜单上使用伪类创建的，因此事情并非如此简单。我推荐一个定制的步行者来实现你的目标。不幸的是，我无法自己快速地组合一个例子，但我可以指出你到这个链接which covers exactly what you're trying to do

另一个可能的解决方案，我只是想到，不一定和理想的一个，但将使用jQuery来添加箭头一旦页面被加载，所有<a>包含子菜单。

我已经更新了这个答案详细说明我将如何完成它，使用您提供的代码：

更改创建伪元素类的CSS：

#PB .widget_nav_menu .menu-item-has-children a .arrow-down { 
    content: "\f107"; 
    font-family: FontAwesome; 
} 

之后，看看下面，我评论，我把代码追加箭头等这应该工作，但我不能够建立一个的jsfiddle提供一个工作示例：

/** 
* Custom menu widget toggles 
* 
* @since 2.0.0 
*/ 
     customMenuWidgetAccordion: function() { 

      var self = this; 

      // Append the arrows here 
      var i = $('<i>').attr({ 
       class: 'arrow-down' 
      }); 
      $('.menu-button-has-children a').append(i); 

      // Open toggle for active page 
      $('.widget_nav_menu .current-menu-ancestor', self.config.$siteMain).addClass('active').children('ul').show(); 

      // Toggle items 
      $('.widget_nav_menu', self.config.$siteMain).each(function() { 

       var $hasChildren = $(this).find('.menu-item-has-children'); 

       $hasChildren.each(function() { 

        $(this).addClass('parent'); 
        var $links = $(this).children('a'); 

        $links.on('click', function(event) { 

         // Here is our preventDefault if the target is arrow-down 
         if($(event.target).hasClass('arrow-down')){ 
          // If the target has the class 'arrow-down' preventDefault to stop normal behavior 
          event.preventDefault(); 
         } 

         var $linkParent = $(this).parent('li'); 
         var $allParents = $linkParent.parents('li'); 

         if (! $linkParent.hasClass('active')) { 
          $hasChildren.not($allParents).removeClass('active').children('.sub-menu').slideUp('fast'); 
          $linkParent.addClass('active').children('.sub-menu').stop(true, true).slideDown('fast'); 
         } else { 
          $linkParent.removeClass('active').children('.sub-menu').stop(true, true).slideUp('fast'); 
         } 

         return false; 
        }); 
       }); 
      }); 

     }, 

根据<i>的位置，一旦将其附加到<a>后，事物可能会跳出原位。我将它放在绝对位置并淡入。

如果你仍然无法工作，你可以创建一个我可以工作的jsFiddle吗？