HTML
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-401 dt-mega-menu mega-auto-width mega-column-3">
<a href='#' data-level='1'>
<i class="logo-png dnld-logo"></i>
<span class="menu-item-text">
<span class="menu-text">Download App</span>
</span>
</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71">
<a href='#' data-level='1'>
<i class="logo-png subs-logo"></i>
<span class="menu-item-text">
<span class="menu-text">Purchase Subscription</span>
</span>
</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-74 has-children">
<a href='#' class='not-clickable-item' data-level='1'>
<i class="logo-png help-logo"></i>
<span class="menu-item-text">
<span class="menu-text">Help</span>
</span>
</a>
<ul class="sub-nav gradient-hover hover-style-click-bg level-arrows-on">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 first">
<a href='#' data-level='2'>
<i class="logo-png faqs-logo"></i>
<span class="menu-item-text">
<span class="menu-text">FAQS</span>
</span>
</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">
<a href='#' data-level='2'>
<i class="logo-png vid-logo"></i>
<span class="menu-item-text">
<span class="menu-text">Instructional Videos</span>
</span>
</a>
</li>
</ul>
</li>
There are over 20 elements structured like the above examples. Each innermost span should have a different class applied only when clicked, defining the color of the text.
JQuery
(function($) {
$(document).ready(function() {
$('li.act > a > i').removeClass('logo-png').addClass('activatedd');
function addEventListenerByClass(className, event, fn) {
var list = document.getElementsByClassName(className);
for (var i = 0, len = list.length; i < len; i++) {
list[i].addEventListener(event, fn, true);
}
}
addEventListenerByClass('menu-item', 'click', showIcon);
var cssClasses = ['home-text', 'about-text', 'print-text', 'dnld-text', 'subs-text', 'help-text', 'sorks-text', 'cont-text', 'work-text', 'col-text', 'body-text', 'hst-text', 'space-text', 'cell-text', 'organ-text', 'system-text', 'cs-text', 'ae-text', 'ag-text', 'bsi-text', 'med-text', 'tudors-text', 'roma-text', 'vict-text', 'vik-text', 'ww-text', 'ss-text', 'pe-text', 'sc-text', 'faqs-text', 'vid-text', 'email-text', 'trial-text', 'next-text'];
function showIcon() {
$("#primary-menu .act").removeClass("act");
$("#primary-menu .activatedd").removeClass("activatedd").addClass("logo-png");
//Add active class for its parent if it is level 1
$(this).addClass("act").parents("li").addClass("act");
$('> a > i', $(this)).removeClass("logo-png").addClass("activatedd").parents().find("li.act>a>i.logo-png").removeClass("logo-png").addClass("activatedd");
}
})
})(jQuery);
var cssClasses contains all the classes that we have to apply. In the provided HTML example,
<span class="menu-text">Download App</span>dnld-text class. However, when another element is clicked (e.g., FAQs), the previous class needs to be removed and replaced with the class related to this new element along with its parent's class.
The JavaScript function written performs a similar action for icons, but it applies and removes the same class from all elements. We can target specific elements based on their class, such as $('i + span > span'). How should I modify this functionality?