Kevin Powell - Community•2y ago

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>

<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');
            });

$('.sub-menu > li>a').click( function() { 
      console.log($(this).closest("p"));
      $(this).closest("p").addClass('highlight_parent_menu');
            });

2 Replies

Unknown User•2y ago

Message Not Public

Jochem•2y ago

Couple of points about your HTML: 1) You're using a P as a header, you should use an appropriate H tag. I picked h2, because you should only ever have one h1, but you might already have an h2 above this in this section, in which case this should be h3 2) The heading needs to be outside of the list, it's not a list item itself 3) Your li's have empty class attributes, they're unnecessary 4) You nested your A and LI tags the wrong way around, you do <li><a></li></a>. The browser understands that as <li><a></a></li> and discards the last </a>, but it's better to be correct and explicit 5) You have a bunch of spans inside the A's you probably don't need. If you're using them to apply a class, use a class on the A or the LI

<h2 class="submenu_header">
  <i class="fa fa-book fa-lg"></i> 1st Year
</h2>
<ul class="sub-menu " id="products">
  <li><a data-toggle="tab" href="#1y1s">First Semester</a></li>
  <li><a data-toggle="tab" href="#1y2s">Second Semester</a></li>
  <li><a data-toggle="tab" href="#1y3s">Third Semester</a></li>
</ul>

<h2 class="submenu_header">
  <i class="fa fa-book fa-lg"></i> 1st Year
</h2>
<ul class="sub-menu " id="products">
  <li><a data-toggle="tab" href="#1y1s">First Semester</a></li>
  <li><a data-toggle="tab" href="#1y2s">Second Semester</a></li>
  <li><a data-toggle="tab" href="#1y3s">Third Semester</a></li>
</ul>

Gaming

Programming

how to highlight menu on submenu clicked