how to highlight menu on submenu clicked

Hi all, i have a <p> tag which is the menu and <li>s as submenus.
How i can target via Javascript the upper <p> element when li is clicked?
<ul class="sub-menu " id="products">
<p class="submenu_header">
<i class="fa fa-book fa-lg"></i> 1st Year
</p>
                                    
                                    
<li class=""><a data-toggle="tab" href="#1y1s"><span>First Semester</span></li></a>
<li class=""><a data-toggle="tab" href="#1y2s"><span>Second Semester</span></li></a>
<li class=""><a data-toggle="tab" href="#1y3s"><span>Third Semester</span></li></a>
</ul>


i have this script which is triggered when i click but i can't target the upper p element
$('.sub-menu > li>a').click( function() { 
      console.log($(this).closest("p"));
      $(this).closest("p").addClass('highlight_parent_menu');
            });  
image.png
Was this page helpful?