Close menu by clicking another

Question

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 the 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 you to click on a main item, close the previous item, so that it is not all opened as you click...

Answer 1

Add this to your code above the code:

$('ul.list-submenu').slideUp(); // Essa linha
$(this).find('ul').slideToggle();