I have the following MENU:
<div id="menu">
<img style="position: relative;right:45px;bottom:39px" src="<?= base_url('assets/img/menu-topo.png') ?>" width="340px"/>
<div style="position:absolute;width:100%;float:right;">
<a style="position:relative;bottom:105px;float:right;color:#FFF;font-size:22px; " onclick="fecharMenu()"><span style="bottom:0;" class="fa fa-close"></span></a>
</div>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="<?= base_url('/') ?>"> Painel</a>
</li>
<?php
echo '<li class="submenu" data-action="open">';
echo ' <a><span class="pull-right fa fa-chevron-left"></span> Gerenciar</a>';
echo ' <ul class="list-submenu">';
if ($this->session->userdata('id_perfil') == 1):
echo '<li><a href="' . base_url('/') . 'gerenciar/administrativo">Administradores</a></li>';
echo '<li><a href="' . base_url('/') . 'gerenciar/assinantes">Assinantes</a></li>';
echo '<li><a href="' . base_url('/') . 'evento/componentes">Componentes</a></li>';
echo '<li><a href="' . base_url('/') . 'evento/formasdepagamento">Formas de Pagamento</a></li>';
echo '<li><a href="' . base_url('/') . 'gerenciar/tiposdehistorico">Tipos de Contato</a></li>';
endif;
if ($this->session->userdata('id_perfil') == 2):
/* echo '<li><a href="' . base_url('/') . 'gerenciar/assinantes-secundarios">Assinantes Secundários</a></li>';*/
echo '<li><a href="' . base_url('/') . 'gerenciar/fornecedores">Fornecedores</a></li>';
echo '<li><a href="' . base_url('/') . 'gerenciar/clientes">Clientes</a></li>'
. ' <li><a href="' . base_url('/') . 'evento/pacotes">Pacotes</a></li>'
. ' <li><a href="' . base_url('/') . 'gerenciar/template">Template Convite</a></li>';
echo '<li><a href="' . base_url('/') . 'gerenciar/tiposdehistorico">Tipos de Contato</a></li>';
echo '<li><a href="' . base_url('/') . 'gerenciar/tiposdefornecedor">Tipos de Fornecedor</a></li>';
endif;
echo ' </ul>';
echo '</li>';
if ($this->session->userdata('id_perfil') == 2):
echo ''
. '<li class="submenu" data-action="open">'
. ' <a><span class="pull-right fa fa-chevron-left"></span> Agenda</a>'
. ' <ul class="list-submenu">'
. ' <li><a href="' . base_url('/') . 'evento/configuracoes">Configurações</a></li>'
. ' <li><a href="' . base_url('/') . 'evento/agenda">Calendário</a></li>'
. ' <li><a href="' . base_url('/') . 'evento/convidados">Convidados</a></li>'
. ' </ul>'
. '</li>'
. '<li class="submenu" data-action="open">'
. ' <a><span class="pull-right fa fa-chevron-left"></span> Financeiro/Custos</a>'
. ' <ul class="list-submenu">'
. ' <li><a href="' . base_url('/') . 'financeiro/custo_geral">Fixos</a></li>'
. ' <li><a href="' . base_url('/') . 'financeiro/custo_evento">Evento</a></li>'
. ' </ul>'
. '</li>';
endif;
?>
</ul>
<br/>
</div>
And jQuery:
$('.submenu').click(function () {
if ($(this).attr('data-action') == 'open') {
$(this).attr('data-action', 'close');
$(this).find('a span').removeClass('fa-chevron-left');
$(this).find('a span').addClass('fa-chevron-down');
} else {
$(this).attr('data-action', 'open');
$(this).find('a span').removeClass('fa-chevron-down');
$(this).find('a span').addClass('fa-chevron-left');
}
$(this).find('ul').slideToggle();
});
It works perfectly, however, I would like that when I click on a main item, I close the previous item so that it does not remain all the open items as they are clicking ...