how to target pseudo element with java script

Question

so i have a menu and i add a font awesome icon on each parent menu. and if they click the icon it will show slide down animation to show their child menu.

currently my code is like this on css

li {
    a {
        border-bottom: solid thin $color-green;
        @include font-size(1.2);
        padding: 5px 0px;
    }
    .sub-menu {
        display: none;
        list-style: none;
        padding: 0;
        a {
            padding: 5px 20px;
            display: block;
        }
    }
    &.menu-item-has-children {
        a {
            &::after {
                content: '\f055';
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                float: right;
            }
            &::before{
            content: '\f056;';
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            float: right;
           }
        }
    }
}

on my php file( im using wp)

<div id="navbar-main-menu" class="collapse navbar-collapse">
   <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav top-menu ']);
      endif;
      ?>
</div>
<!--/.nav-collapse -->

i want to jquery active only on max resolution 767, so my script is like this. but i dont know how to target the after and make specifict code so when i click 1 parent link it didnt trigger the other parent link to show their child menu.

var resizeTimer;
$(window).resize(function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($(window).width() <= 767) {
            $('.menu-item-has-children a::after').click(function() {
                $('a').slideToggle();
            });
        } else {

        }
    });
});

this is my progress now

please help

Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — Teemu, Sep 24 '16 at 06:30
You could try using `` element, `css` media queries, `transition` to achieve effect. Do not believe it is currently possible to select `css` pseudo element using `javascript` — guest271314, Sep 24 '16 at 06:54

Varun Kumar · Answer 1 · 2016-09-24T07:38:39.123

Use this keyword instead of targeting a element.

var resizeTimer;
$(window).resize(function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($(window).width() <= 767) {
            $('.menu-item-has-children a').click(function() {
                $(this).slideToggle();
            });
        } else {

        }
    });
});

On a separate note why are you using a timer to check the width. I am not sure if this is hindering with your code or not. If the above code doesn't work, please create a JSfiddle and share the link so that I can have a better look.

Update

Pseudo element doesn't work with jquery selector. Updated the code for the same. But this may not be complete solution OP is looking for.

I just tested the pseudo selector but the above answer was more aligned towards solving a different problem as described by @antonscie `so when i click 1 parent link it didnt trigger the other parent link to show their child menu.` — Varun Kumar, Sep 24 '16 at 07:41

how to target pseudo element with java script

1 Answers1