1

Eu tenho um arquivo chamado Menu.xhtml o qual tenho toda estrutura do menu do meu projeto. Porém ao clicar em algum link do menu não abre a pagina de destino, a função de expandir e deixar selecionado o link do menu o qual o usuário clicar e feito através de um arquivo em java scripts que encontrei na internet. (segue o link de onde peguei o template e funcionalidades: https://github.com/rmnresende/layout-primefaces-patagonia)

Com isso não sei se o erro esta nesse arquivo chamado: app.js ou no meu arquivo Menu.xhtml.

OBS: descobri que se remover esse style [ styleClass="aw-item-link" ] o link funciona mas perde a função do java script.

Veja o códigos:

Menu.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html">

    <nav class="aw-menu">
        <ul>
            <li>
                <h:link outcome="/sistema/dashboard" styleClass="aw-item-link"><i class="fa fa-fw fa-dashboard"></i>Dashboard</h:link>
            </li>

            <li>
                <h:link styleClass="aw-item-link" ><i class="fa fa-fw fa-plus-square"></i>Cadastros <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link styleClass="aw-item-link" outcome="/sistema/computador" ><i class="fa fa-fw fa-desktop"></i>Computador</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/software" styleClass="aw-item-link"><i class="fa fa-fw fa-buysellads"></i>Software</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/marca" styleClass="aw-item-link"><i class="fa fa-fw fa-copyright"></i>Marca</h:link></li> 
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-users"></i>Colaboradores <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/sistema/colab" styleClass="aw-item-link" ><i class="fa fa-fw fa-user"></i>Colaborador</h:link></li>
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-cog"></i>Licensas <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/sistema/tipoSoftware" styleClass="aw-item-link" ><i class="fa fa-fw fa-copyright"></i>Tipo Software</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/openLicense" styleClass="aw-item-link" ><i class="fa fa-fw fa-cloud-download"></i>Open License</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/nf" styleClass="aw-item-link" ><i class="fa fa-fw fa-file-text"></i>Nota Fiscal</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/computadorSoftware" styleClass="aw-item-link" ><i class="fa fa-fw fa-clipboard"></i>PC + Software</h:link></li>
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-file-text"></i>Lista de IPs <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/sistema/ip" styleClass="aw-item-link" ><i class="fa fa-fw fa-indent"></i>IP</h:link></li>
                    <li class="subitem"><h:link styleClass="aw-item-link" ><i class="fa  fa-fw fa-user-times"></i>Teste Menu</h:link></li>
                </ul>
            </li>
            
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-pagelines"></i>Agrícola <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/agricola/canaDiaFrente" styleClass="aw-item-link" ><i class="fa fa-fw fa-sun-o"></i>Cana Dia Frente</h:link></li>
                    <li class="subitem"><h:link outcome="/agricola/canaDiaHora" styleClass="aw-item-link" ><i class="fa fa-fw fa-clock-o"></i>Cana Dia Hora</h:link></li>                  
                </ul>
            </li>
            <li>
                <h:link styleClass="aw-item-link"><i class="fa fa-fw fa-bullhorn"></i>Recursos Humano <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">
                    <li class="subitem"><h:link outcome="/rh/treinamento" styleClass="aw-item-link" ><i class="fa fa-fw fa-sun-o"></i>Treinamento</h:link></li>
                    <li class="subitem"><h:link outcome="/rh/relacaoFuncaoTreinamento" styleClass="aw-item-link" ><i class="fa fa-fw fa-sun-o"></i>Função/Treinamento</h:link></li>
                </ul>
            </li>
        </ul>
    </nav>

</ui:composition>

app.js

$(function() {
	$('.js-toggle').bind('click', function(event) {
		$('.js-sidebar, .js-content').toggleClass('is-toggled');
		event.preventDefault();
	});

	$('.aw-item-link').bind('click', function(event) {
		debugger;
		event.preventDefault();
		expandirRecolherItensDoMenu(event);
	});
});

function expandirRecolherItensDoMenu(event) {

	debugger;

	var linkClicado = event.target;

	// se clicou no icone do link em vez de clicar no link
	if ($(linkClicado).hasClass('fa-fw')) {
		linkClicado = $(linkClicado).parent();
	}

	avaliarQualLiRecolherExpandir($(linkClicado).parent(), linkClicado);
}

function avaliarQualLiRecolherExpandir(liPai, linkClicado) {

	// quando for subitem nao precisa fazer nada
	if (!($(liPai).hasClass('subitem'))) {

		// se nao estiver selecionada, desativa a li que estiver selecionda
		if (!($(liPai).hasClass('is-selected'))) {
			desativarLiSelecionada();
		}
		expandirRecolherMenu(linkClicado, liPai);
	}
}

function expandirRecolherMenu(linkClicado, liPai) {

	$(liPai).toggleClass('is-selected');
	var proximoMenu = $(linkClicado).next('.aw-menu-tree');
	proximoMenu.toggle('1000');
}

function desativarLiSelecionada() {

	var liAtiva = $('.is-selected');

	if (liAtiva.length > 0) {
		var menuExpandido = $(liAtiva).find('.aw-menu-tree');
		menuExpandido.toggle('1000');
		$(liAtiva).removeClass('is-selected');
               
	}
}

1
  • Se os links que expandem os menus não tiverem o atributo href="#", basta colocar neles. Dá uma olhada na minha resposta.
    – Sam
    15/03/2019 às 15:25

2 Respostas 2

0

Você está fazendo um bind em todos os links com a classe .aw-item-link e fazendo um event.preventDefault():

$('.aw-item-link').bind('click', function(event) {
   event.preventDefault();
   expandirRecolherItensDoMenu(event);
});

O event.preventDefault(); irá cancelar o direcionamento do link clicado. Logo, esse event handler deveria ser usado apenas nos links que irão expandir os menus, mas a classe .aw-item-link está presente em todos os links. Altere o seletor para pegar apenas os links que contenham o atributo href="#":

$('.aw-item-link[href="#"]').bind('click', function(event) {
   event.preventDefault();
   expandirRecolherItensDoMenu(event);
});

Outra forma seria remover a classe .aw-item-link dos links (exceto dos que expandem os menus), se isto não for prejudicar a estilização dos mesmos.

Solução 2: adicionando outra classe

Você pode adicionar uma segunda classe apenas nos links que expandem os menus. Por exemplo, a classe .expandir, ficando assim:

<h:link styleClass="aw-item-link expandir" ><i class="fa fa-fw fa-plus-square"></i>Cadastros <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>

E alterar o seletor no .bind:

$('.aw-item-link.expandir').bind('click',...

Com isso, apenas os links que possuírem as duas classes serão afetadas. Os links que possuírem apenas a classe .aw-item-link serão ignorados.

7
  • Removi o .aw-item-link dos links, quase deu certo falta apenas o link que clicar ficar selecionado e expandido, pois da forma que ficou após clicar no link ele abre a pagina mas o menu volta ao normal...
    – Jarciano
    15/03/2019 às 17:35
  • Adicionei à resposta outra solução. Veja.
    – Sam
    15/03/2019 às 17:43
  • Eu não consegui ver o código no link que vc mandou
    – Sam
    18/03/2019 às 15:03
  • É so colocar uma classe como falei na resposta, e alterar o seletor do bind usando essa classe.
    – Sam
    18/03/2019 às 22:16
  • Agradeço sua paciência e tentativa em ajudar mas não consegui.. não entendi qual seletor do bind tenho que alterar..
    – Jarciano
    19/03/2019 às 14:29
0

Eu fiz isso, correto?

app.js

$(function () {
    $('.js-toggle').bind('click', function (event) {
        $('.js-sidebar, .js-content').toggleClass('is-toggled');
        event.preventDefault();
    });

    $('.aw-item-link').bind('click', function (event) {
        event.preventDefault();
        expandirRecolherItensDoMenu(event);
    });
    
    $('.aw-item-link.expandir').bind('click', function (event) {
        event.preventDefault();
        expandirRecolherItensDoMenu(event);
    });
});

menu.xhtml

<nav class="aw-menu">
        <ul>
            <li>
                <h:link outcome="/sistema/dashboard"><i class="fa fa-fw fa-dashboard"></i>Dashboard</h:link>
            </li>

            <li>
                <h:link styleClass="aw-item-link.expandir" ><i class="fa fa-fw fa-plus-square"></i>Cadastros <i class="fa fa-fw fa-angle-left pull-right"></i></h:link>
                <ul class="aw-menu-tree">

                    <li class="subitem"><h:link  outcome="/sistema/computador" styleClass="aw-item-link"><i class="fa fa-fw fa-desktop"></i>Computador</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/software" styleClass="aw-item-link" ><i class="fa fa-fw fa-buysellads"></i>Software</h:link></li>
                    <li class="subitem"><h:link outcome="/sistema/marca" styleClass="aw-item-link" ><i class="fa fa-fw fa-copyright"></i>Marca</h:link></li> 
                </ul>
            </li>.....

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .