Parent menu and submenu active after selecting element

Question

Parent menu and submenu active after selecting element

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I would like help solving a problem: I have a menu that contains submenus, and I would like it to be selected when the selected menu is active and if the submenu is selected, the parent menu and the child menu are active. I made a short snippet here in jQuery . It is working in parts, but it is always leaving an extra menu active when I select a submenu.

Here is the code for the .html menu:

<ul class="nav navbar-nav">
            <li><a href="<?= HOME_URI; ?>/" title="Página inicial"><i class="glyphicon glyphicon-home" aria-hidden="true"></i> HOME</a></li>
            <li><a href="<?= HOME_URI; ?>/agenda" title="Agenda"><i class="fa fa-calendar" aria-hidden="true"></i> AGENDA</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" >
                    <i class="fa fa-university" aria-hidden="true"></i>
                    EMPRESA<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="<?= HOME_URI; ?>/users/">Controle de pessoal</a></li>
                    <li><a href="<?= HOME_URI; ?>/noticias/">Pacientes</a></li>
                    <li><a href="<?= HOME_URI; ?>/noticias/adm/">Funcionarios</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">OUTROS DEPARTAMENTOS</li>
                    <li><a href="<?= HOME_URI; ?>/providers">Fornecedores</a></li>
                    <li><a href="#">Patrimônio</a></li>
                    <li><a href="#">Controle de Estoque</a></li>
                    <li><a href="#">Laboratório</a></li>
                    <li><a href="#">Convênios / Planos</a></li>
                    <li><a href="#">Tabela de Honorários</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" ><i class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></i> FINANCEIRO<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Contas a Pagar</a></li>
                    <li><a href="#">Contas a Receber</a></li>
                    <li><a href="#">Fluxo de caixa</a></li>
                    <li><a href="#">Controles de Cheques</a></li>
                    <li><a href="#">Pagamentos</a></li>
                    <!--<li><a href="<?= HOME_URI; ?>/noticias/">Notícias</a></li>
                    <li><a href="<?= HOME_URI; ?>/noticias/adm/">Notícias Admin</a></li>-->
                </ul>
            </li>

            <li><a href="<?= HOME_URI; ?>/user-register/" title="Cadastro de pessoal"><i class="fa fa-user-plus" aria-hidden="true"></i> CADASTRO DE PESSOAL</a></li>
            <!--<li><a href="<?= HOME_URI; ?>">UTILITÁRIO</a></li>-->
        </ul>

Follow Jquery:

$(function () { $('ul.nav li').each(function () { if (window.location.href.indexOf($(this).find('a:first').attr('href')) > -1) { $(this).closest('ul').closest('li').attr('class', 'active'); $(this).addClass('active').siblings().removeClass('active'); } }); });

Follow the image of how it is working and when it is selected a submenu another menu other than the menu and also selected in the case there was active also the home that should not be active

jquery

asked by anonymous 06.10.2016 / 20:07

2 answers

Php Filter Search Mysql The getSelectionStart (TextView) method returns incorrect value

score 0 · Answer 1

Try this:


$(function () {
    $('ul.nav li').each(function (index, element) {
        if (window.location.href.indexOf($(element).find('a:first').attr('href')) > -1) {
            $(element).closest('ul').closest('li').attr('class', 'active');
            $(element).addClass('active').siblings().removeClass('active');
        }
    });
});

score 0 · Answer 2

You have a Bootply here ;

Basically, your .closest() was being applied to the wrong element, because of your $(this) selector.

Since jQuery, in .each() , already gives you the current-element context ( .each(index, element) ) we're not guessing at what li we are (whereas your $(this) refers to ul.nav li and not to li that is equivalent to the current-element in the loop) and we use element directly.

In this element we then select and capture the attribute href via $('a', element) - remember that element is the current return element of each .

If this element exists, then we can then take the href and see if that is the same (or indexOf) of the page where we are.

If so, then there is .closest() of dropdown (and not ul li ) and finally add the class open (this means that you are using bootstrap 3 if you do not think it is active )

To make link active, just add the line

$($li).addClass('active');

after

anchor.closest('.dropdown').addClass('open');