0

Tenho um menu com 3 botões. Cada botão mostra a respectiva DIV e oculta as restantes, com hide/show, por exemplo. Como faço para evitar que o botão seja clicado novamente antes de o efeito hide/show terminar? Ou se alguém tiver outro método para que quando ocorra cliques rápidos uma div não sobreponha a outra.

$('.items').first().show();	
	$('.menu-services li a').click(function() {
		item_id = $(this).attr("data-service");
		$('.items').fadeOut(400, function(){
			$('.'+item_id).delay(700).fadeIn(400);
		});
	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="menu-services">
  <li>
    <a href="javascript:;" data-service="item-1">Serviço 1</a>
  </li>
  <li>
    <a href="javascript:;" data-service="item-2">Serviço 2</a>
  </li>
</ul>

<div class="items item-1 row" style="display: none;">
  <h1>Serviço 1</h1> 
</div>
<div class="items item-2 row" style="display: none;">
  <h1>Serviço 2</h1> 
</div>

2 Respostas 2

1

Antes de mais nada eu analisei o seu código e verifiquei que você está utilizando a âncora de hyperlink <a> como se fosse um botão, por boas práticas não faça isto! Ao invés do hyperlink <a> utilize a tag <button>!

Definição de uso da Tag <a>

A tag <a> define um hiperlink, que é usado para vincular de uma página para outra. O atributo mais importante do elemento <a> é o atributo href, que indica o destino do link.

FONTE OFICIAL: W3SCHOOLS

Definição de uso da Tag

A tag <button> define um botão clicável. Dentro de um elemento <button> você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e os botões criados com o elemento <input>.

DICA: Sempre especifique o atributo type para um elemento <button>. Navegadores diferentes usam tipos padrão diferentes para o elemento <button>.

FONTE OFICIAL: W3SCHOOLS

Agora vamos para as opções que temos de acordo com o cenário, como você não nos deus nenhuma regra de negócios e não detalhou muito o seu problema eu tirei a seguinte conclusão:

Você terá diversos botões (serviços) e diversos containers que são as divs (lista de items dos determinados serviços). Os mesmos estarão estáticos no HTML, ou seja, eu não poderia criar um container para todos os items de serviços, e inserir dinamicamente o conteúdo daquele item neste container.

        // PERCORRE A ÁRVORE HTML, DENTRO DA LISTA ONDE SE ENCONTRAM OS BOTÕES
        // RETORNA UM ARRAY DE BOTÕES ENCONTRADOS
        $.fn.searchButtons = function () {
            return $('.menu-services li button').each(() => { });
        }

        // PERCORRE A ÁRVORE HTML, DENTRO DO BODY ONDE SE ENCONTRAM OS CONTAINERS
        // RETORNA UM ARRAY DE CONTAINERS ENCONTRADOS
        $.fn.searchContainers = function () {
            return $('div').each(() => { });
        }

        // EXIBE & ESCONDE TODOS OS CONTAINERS DOS ITEMS DE SERVIÇOS
        $.fn.displayContainers = function (_buttonClickedEl) {
            $.fn.searchContainers().each((i, el) => {
                if (this.id === _buttonClickedEl.id) {
                    $(el).show();
                }
            });
        }

        $.fn.hideContainers = function (_buttonClickedEl) {
            $.fn.searchContainers().each((i, el) => {
                if (this.id !== _buttonClickedEl.id) {
                    $(el).hide();
                }
            });
        }

        // HABILITA & DESABILITA TODOS OS BOTÕES DA LISTA DE SERVIÇOS
        $.fn.enableAllButtons = function () {
            $.fn.searchButtons().each((i, el) => {
                $(el).attr("disabled", false);
            });
        }

        $.fn.disableAllButtons = function () {
            $.fn.searchButtons().each((i, el) => {
                $(el).attr("disabled", true);
            });
        }

        // CRIA O EFEITO DE FADEOUT E FADEIN
        $.fn.createEffectContainer = function (_buttonClickedID, _fadeOutTimer, _fadeInTimer, _delayFadeInTimer) {
            var containerItemService = `#items-${_buttonClickedID}`;

            $(containerItemService).fadeOut(_fadeOutTimer, function () {
                $(this).delay(_delayFadeInTimer).fadeIn(_fadeInTimer, function () {
                    $.fn.enableAllButtons();
                });
            });
        }

        // EVENTO DE ONCLICK NO DETERMINADO BOTÃO DE SERVIÇO DA LISTA
        $('.menu-services li button').click(function () {
            $.fn.disableAllButtons();
            $.fn.displayContainers(this);
            $.fn.hideContainers(this);
            $.fn.createEffectContainer(this.id, 400, 400, 700);
        });
    <ul class="menu-services">
        <li>
            <button type="button" id="service-one">Serviço 1</button>
        </li>
        <li>
            <button type="button" id="service-two">Serviço 2</button>
        </li>
    </ul>

    <div id="items-service-one" class="row" style="display: block;">
        <h1>Serviço 1</h1>
    </div>
    <div id="items-service-two" class="row" style="display: none;">
        <h1>Serviço 2</h1>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

10
  • Acho que não resolveu imgur.com/6vuECLs
    – hugocsl
    Commented 23/05/2019 às 22:26
  • @hugocsl o disabled está funcionando, porém o timestamp está muito baixo, por isto te dá a sensação de que esta clicando várias vezes seguidas no botão desabilitado.. Porém, você conseguiu entender se ele quer desativar todos os botões ou somente o que clicou?
    – user148754
    Commented 23/05/2019 às 22:31
  • Desculpe discordar, mas a tag <a> tem flexibilidade de uso, e pode ser usada para outras ações que não seja apenas para direcionar a outra página via href. Essa tag é muito usada em menus (principalmente). A tag button não serve em menus.
    – Sam
    Commented 23/05/2019 às 22:32
  • Mas de fato, ela poderia ser dispensada, deixando apenas as <li> clicáveis.
    – Sam
    Commented 23/05/2019 às 22:34
  • @Sam entendo o seu ponto de vista, realmente as âncoras <a> são utilizadas em alguns momentos como se fosse um <button>, como por exemplo dando aquele efeito em transição de <section> sabe? Porém seguindo as documentações de prestígios e boas práticas elas não deveriam ser utilizadas deste modo. Como desenvolvedor eu sigo as boas práticas e documentações, porém entendo o seu ponto de vista.
    – user148754
    Commented 23/05/2019 às 22:37
1

Ao usar o seletor $('.items').fadeOut... você irá chamar o fadeOut duas vezes, porque existe dois elementos com a classe .items. O certo era que o fadeOut ocorresse apenas uma vez.

Para isso coloque o pseudo seletor :visible para que o fadeOut só atinja o elemento que estiver visível:

$('.items:visible').fadeOut...

Agora, para que uma animação não atropele a outra, use .stop(), que para a animação que está ocorrendo:

Exemplo:

$('.items').first().show();

$('.menu-services li a').click(function(){
    $('.items').stop();
    var item_id = $(this).attr("data-service");
    $('.items:visible').fadeOut(400, function(){
       $('.'+item_id).delay(700).fadeIn(400);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-services">
  <li>
    <a href="javascript:;" data-service="item-1">Serviço 1</a>
  </li>
  <li>
    <a href="javascript:;" data-service="item-2">Serviço 2</a>
  </li>
</ul>

<div class="items item-1 row" style="display: none;">
  <h1>Serviço 1</h1> 
</div>
<div class="items item-2 row" style="display: none;">
  <h1>Serviço 2</h1> 
</div>

3
  • Massa! Achei que viria uma resposta com setTimeout rss
    – hugocsl
    Commented 23/05/2019 às 22:37
  • @hugocsl acabei de atualizar o meu algoritmo, o que você acha?
    – user148754
    Commented 23/05/2019 às 23:30
  • aqui ainda deu bug pra mim! cliquei rápido e exibiu os os conteúdos Commented 28/05/2019 às 1:24

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 .