2

Quando clicado na categoria adiciono a classe "active". Quando clicar em outra categoria remover a classe da categoria anterior e adicionar na clicada. Até aí tudo bem. Questão é fazer a mesma forma quando clicado no título. (não posso usar "id" estático pois vai ter várias categorias adicionada pelo usuário então nunca vou saber o id em questão).

$(function() {
  $('.overlay').on('click', function(e) {
    var active = $(e.currentTarget);


    $('.overlay').not(this).removeClass('active');
    $('.overlay').not(this).removeClass('collapse');
    $(this).addClass('active');
    if (active.attr('aria-expanded') === 'true') {
      $('.overlay').not(this).addClass('collapsed');
      not(active).attr('aria-expanded') === 'true';
    }
  });
  $('.title').on('click', function(e) {
    var active = $(e.currentTarget);
    $(this).next().addClass('active');
  });
});
#categorias {
  padding: 80px 0;
}

#categorias .categoria {
  position: relative;
  cursor: pointer;
}

#categorias .categoria h2 {
  color: #fff;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  text-align: center;
  z-index: 200;
}

#categorias .categoria img {
  filter: brightness(0.5);
  transition: all 500ms;
}

#categorias .categoria:hover img {
  filter: brightness(1);
}

#categorias .categoria .overlay {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 500ms;
  z-index: 100;
}

#categorias .categoria:hover .overlay,
#categorias .active {
  background: rgba(151, 2, 2, 0.8);
}

#categorias .categoria .divider {
  width: 70%;
  height: 0;
  display: block;
  position: absolute;
  bottom: 0;
  text-align: center;
  transition: all 500ms;
  z-index: 200;
  margin: 0 17%;
  background: #fff;
}

#categorias .categoria:hover .divider {
  height: 17px;
}

#categorias ul {
  padding: 0;
  margin: 0;
}

#categorias ul li {
  list-style: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section id="categorias">
  <div class="row no-gutters" id="list-categorias">
    <div class="col-6 col-md-3 categoria" id="grelhas_head">
      <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
      <h2 class="title" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas">grelhas argentinas</h2>
      <span class="overlay" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas"></span>
      <span class="divider"></span>
    </div>

    <div class="col-6 col-md-3 categoria" id="grelhas2_head">
      <img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
      <h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
      <span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
      <span class="divider"></span>
    </div>
  </div>
  <div class="row no-gutters">
    <div class="col">
      <div class="collapse" id="grelhas" aria-labelledby="grelhas_head" data-parent="#list-categorias">
        <div class="card card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </div>
    </div>
    <div class="col">
      <div class="collapse" id="multiCollapseExample2" aria-labelledby="grelhas2_head" data-parent="#list-categorias">
        <div class="card card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1
  • Sua pergunta está muito confusa, poderia editar e explicar melhor?
    – LeAndrade
    Commented 20/12/2018 às 16:05

1 Resposta 1

2

Adicione o evento show.bs.collapse para esconder um título aberto quando abrir outro:

$('.collapse').on('show.bs.collapse', function () {
   $(".collapse.show").collapse('hide');
});

Agora, tem mais dois problemas no seu código:

Um é um erro de sintaxe nestas linhas:

$('.overlay').not(this).addClass('collapsed'); ←
→ not(active).attr('aria-expanded') === 'true';

A primeira linha foi encerrada e o not abaixo ficou isolado. O correto seria retirar o ; da primeira linha e adicionar um ponto antes do not:

$('.overlay').not(this).addClass('collapsed')
.not(active).attr('aria-expanded') === 'true';

Outro problema é que ao clicar no h2 (onde tem o texto "grelhas argentinas"), acontece um bug em que é aplicado um fundo vermelho no h2. Para consertar isso adicionei mais um código para pegar a span.overlay seguinte do h2 clicado. Para isso, adicione no evento click a classe .title, verificando pelo nome da tag o que foi clicado.

O seletor do evento ficará assim:

$('.overlay, .title').on('click', function (e) {...

E a verificação:

if(e.target.tagName != "SPAN"){
  var active = $( e.currentTarget ).next();
  $this = $(this).next();
}else{
  var active = $( e.currentTarget );
  $this = $(this);
}

Veja que o $(this) foi substituído por $this porque será usado diferente em outra parte do código.

Então tudo ficará assim:

$(function () { 

   $('.collapse').on('show.bs.collapse', function () {
      $(".collapse.show").collapse('hide');
   });

    $('.overlay, .title').on('click', function (e) {
        if(e.target.tagName != "SPAN"){
           var active = $( e.currentTarget ).next();
           $this = $(this).next();
        }else{
           var active = $( e.currentTarget );
           $this = $(this);
        }

        
            $('.overlay').not(this).removeClass( 'active');
            $('.overlay').not(this).removeClass( 'collapse');
            $this.addClass( 'active');
        if (active.attr( 'aria-expanded') === 'true') {   
            $('.overlay').not(this).addClass( 'collapsed')
            .not(active).attr( 'aria-expanded') === 'true';
        }
    });
    $('.title').on('click', function (e) {
        var active = $( e.currentTarget );
            $this.next().addClass( 'active');
    });
});
#categorias {padding: 80px 0;}
#categorias .categoria {position: relative;cursor: pointer;}
#categorias .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#categorias .categoria img {filter: brightness(0.5);transition: all 500ms;}
#categorias .categoria:hover img {filter: brightness(1);}
#categorias .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#categorias .categoria:hover .overlay, #categorias .active {background: rgba(151, 2, 2, 0.8);}
#categorias .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#categorias .categoria:hover .divider {height: 17px;}
#categorias ul {padding: 0;margin: 0;}
#categorias ul li {list-style: none;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<section id="categorias">
			<div class="row no-gutters" id="list-categorias">
				<div class="col-6 col-md-3 categoria" id="grelhas_head">
					<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
					<h2 class="title" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas">grelhas argentinas</h2>
					<span class="overlay" data-toggle="collapse" data-target="#grelhas" role="button" aria-expanded="false" aria-controls="grelhas"></span>
					<span class="divider"></span>
				</div>
				
				<div class="col-6 col-md-3 categoria" id="grelhas2_head">
					<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
					<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
					<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
					<span class="divider"></span>
				</div>
			</div>
			<div class="row no-gutters">
			  <div class="col">
			    <div class="collapse" id="grelhas" aria-labelledby="grelhas_head" data-parent="#list-categorias">
			      <div class="card card-body">
			        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			      </div>
			    </div>
			  </div>
			  <div class="col">
			    <div class="collapse" id="multiCollapseExample2" aria-labelledby="grelhas2_head" data-parent="#list-categorias">
			      <div class="card card-body">
			        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
			      </div>
			    </div>
			  </div>
			</div>
		</section>
<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1
  • Boa sam! Me resolveu dois problemas de uma vez só. Tinha feito duas perguntas separadas para não atrapalhar cada assunto. Muito obrigado pela ajuda! Commented 20/12/2018 às 16:20

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 .