I can not use CSS pseudo-element with JQuery

0

I want you to click on the pseudo-element, the menu opens, I tried several codes but none worked, the last one I tried was this:

$('#overlay-menu').after().click(function(){
    var menu = $('#overlay-menu'); //Antes eu tentei usar o this, porém, sem sucesso também
    if (menu.className != 'open') {
        menu.className == 'open';
    }
});
    
asked by anonymous 11.08.2016 / 16:31

1 answer

1

According to this answer in SOen:

  

This is not possible; pseudo-elements are not part of the DOM at all so you can not bind any events directly to them, you can only bind to their parent elements.

That is:

  

This is not possible, pseudo-elements are not part of the DOM, so you can not delegate events directly in these, you can only delegate to your parents

But here's a better alternative (toggleClass) to what you're doing:

$('#overlay-menu').click(function(){
    $(this).toggleClass('open');
});
.open {
  color: red;  
}
#overlay-menu:after {
  content: '++++'
}

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><pid="overlay-menu">HEYA</p>
    
11.08.2016 / 16:49