jquery - Wordpress custom nav, Dropdown title not clickable -

i'm using custom wordpress menu sidebar element (sidebar made in visual composer lay-out).

now problem complete box trigger opening dropdown menu, means main item link can never activated.

i love make arrow trigger submenu open, can't find way arrow , menu item text in same 'ahref'.

this forces me duplicate menu items in menu.

markup created 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> 

the down arrow added using "after:" css statement.

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

code think asociated

 /**          * custom menu widget toggles          *          * @since 2.0.0          */         custommenuwidgetaccordion: function() {             var self = this;              // open toggle 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 = $( ).find( '.menu-item-has-children' );                 $haschildren.each( function() {                     $( ).addclass( 'parent' );                     var $links = $( ).children( 'a' );                     $links.on( 'click', function( event ) {                         var $linkparent = $( ).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;                     } );                 } );             } );          }, 

in nutshell: how can make icon clickable activating dropdown menu , make rest of button send me correct page.

without seeing markup, assume <a> this?

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

with arrow-down being arrow, can like:

$(document).ready(function(){    $(document).on('click', function(e){          if($(e.target).hasclass('arrow-down')){                // if target has class 'arrow-down' preventdefault stop normal behavior               e.preventdefault();                // function display dropdown           }     }); }) 

you can see in action on jsfiddle.

update: since arrow created pseudo class on wordpress menu, things aren't simple. recommend custom walker achieve goal. unfortunately i'm unable put example myself, can point link which covers you're trying do

another possible solution thought of, not , ideal 1 though, use jquery add arrow <a> containing sub-menus once page loaded.

i've updated answer elaborate on how accomplish it, using code provided:

change css creates pseudo element class:

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

after that, take below, commented put code appending arrows, etc. should work, wasn't able build jsfiddle provide working example:

/** * custom menu widget toggles * * @since 2.0.0 */         custommenuwidgetaccordion: function() {              var self = this;              // append arrows here             var = $('<i>').attr({                 class: 'arrow-down'             });             $('.menu-button-has-children a').append(i);              // open toggle 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 = $( ).find( '.menu-item-has-children' );                  $haschildren.each( function() {                      $( ).addclass( 'parent' );                     var $links = $( ).children( 'a' );                      $links.on( 'click', function( event ) {                          // here our preventdefault if target arrow-down                         if($(event.target).hasclass('arrow-down')){                             // if target has class 'arrow-down' preventdefault stop normal behavior                             event.preventdefault();                         }                          var $linkparent = $( ).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;                     } );                 } );             } );          }, 

depending on how <i> positioned, things might jump out of place once it's appended <a>. i'd set absolute positioning , fade in.

if you're still unable working, can create jsfiddle can work on?