Estou com um problema ao tentar alternar e adicionar classes a elementos quando ocorre um evento de clique do mouse. Da mesma forma, tenho vários elementos "li". Quero adicionar "class = subdrop active" à tag de âncora selecionada e "class = active" à tag li subsequente. Não tenho certeza se estou lidando com a manipulação de classes corretamente. Alguém poderia sugerir a abordagem correta?
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-layout-dashboard"></i>
<span>Admin Profile</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="<?php echo base_url('admin_dashboard'); ?>">Dashboard</a>
</li>
<li>
<a href="<?php echo base_url('admin_profile'); ?>">Profile</a>
</li>
<li>
<a href="#">Settings</a>
</li>
<li>
<a href="#">Contacts</a>
</li>
</ul>
</li>
Tentando obter os seguintes resultados em cliques li selecionados
<li class="submenu">
<a href="javascript:void(0);" class="subdrop active"><i class="ti ti-layout-dashboard"></i><span>Admin Profile</span><span class="menu-arrow"></span>
</a>
<ul>
<li><a href="<?php echo base_url('admin_dashboard'); ?>" class="active">Dashboard</a></li>
<li><a href="<?php echo base_url('admin_profile'); ?>">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</li>