0

Никак не могу додумать как по повторному клику по блоку возвращать все это дело в исходное состояние.

Буду рад если кто-то подскажет, у меня явно какие то проблемы с логикой. https://codepen.io/anon/pen/YVQpgO

$('.block').on('click', function(){
    $('.block').find('.img-gap').fadeOut('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
    $(this).addClass('active');
    $(this).siblings().addClass('deactive');
});

$('.block.active').on('click', function(){
    $('.block').find('.img-gap').fadeIn('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
});

2 ответа 2

0

$(.block.active) - на момент присваивания обработчика событий, такого селектора нет, следовательно события не присвоится. в событие click класса .block проверяйте наличие класса .active у текущего элемента.

$('.block').on('click', function(){
        $('.block').removeClass('deactive');
           
        if ($(this).hasClass('active')) {
          $('.block').find('.img-gap').fadeIn('300');
          $('.block').removeClass('active');
        } else {
          $('.block').find('.img-gap').fadeOut('300');
          $('.block').removeClass('active');
          $(this).addClass('active');
          $(this).siblings().addClass('deactive');
        }
    });
.block {
  height: 536px;
  width: 33.1%;
  display: inline-block;
  background: #ccc;
  vertical-align: top;
  transition: 1s;
  cursor: pointer;
  margin-top: 61px;
  float: left;
  margin-right: 2px;
}

.block .img-gap {
  display: flex;
  width: 100%;
  height: 100%;
}

.block .img-gap .img-gap__logo {
  margin: auto;
}

.block__text {
  opacity: 0;
  transition: 0.1s;
  color: white;
  padding: 100px;
}

.block__title {
  display: inline-block;
}
.block__subtitle{
  display: block;
}
.block__more-btn {
  @include main-btn;
  max-width: 178px;
  background: transparent;
  color: white;
  border: 2px solid white;
}

.block.active {
  width: 62%;
  transition: 1s;
}

.block.deactive {
  width: 18.7%;
}

.block.active .block__text {
  opacity: 1;
  transition: 0.2s;
  transition-delay: 0.8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="img-gap">
    <img src="https://placehold.it/100/100" alt="" class="img-gap__logo">
  </div>


  <div class="block__text">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
        <img src="https://placehold.it/100/100" alt="" class="img-gap__logo">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
        <h2 class="block__title">title</h2>
        <span class="block__subtitle">subtitle</span>

        <p class="block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias harum, doloremque ratione asperiores laboriosam facere vitae. At facilis corrupti dolorem debitis, amet minus voluptatum fuga, voluptates nulla repellat nam quasi.
        </p>
        <a href="#" class="block__more-btn">подробнее</a>
      </div>
    </div>
  </div>
</div>
<div class="block">
  <div class="img-gap">
    <img src="https://placehold.it/100/100" alt="" class="img-gap__logo">
  </div>
  <div class="block__text">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
        <img src="https://placehold.it/100/100" alt="" class="img-gap__logo">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
        <h2 class="block__title">title</h2>
        <span class="block__subtitle">subtitle</span>

        <p class="block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias harum, doloremque ratione asperiores laboriosam facere vitae. At facilis corrupti dolorem debitis, amet minus voluptatum fuga, voluptates nulla repellat nam quasi.
        </p>
        <a href="#" class="block__more-btn">подробнее</a>
      </div>
    </div>
  </div>
</div>
<div class="block">
  <div class="img-gap">
    <img src="https://placehold.it/100/100" alt="" class="img-gap__logo">
  </div>
  <div class="block__text">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
        <img src="https://placehold.it/100/100" alt="" class="img-gap__logo">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
        <h2 class="block__title">title</h2>
        <span class="block__subtitle">subtitle</span>

        <p class="block__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias harum, doloremque ratione asperiores laboriosam facere vitae. At facilis corrupti dolorem debitis, amet minus voluptatum fuga, voluptates nulla repellat nam quasi.
        </p>
        <a href="#" class="block__more-btn">подробнее</a>
      </div>
    </div>
  </div>
</div>

0

Хотите, можно так:

$('body').on('click', '.block', function(){
    $('.block').find('.img-gap').fadeOut('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
    $(this).addClass('active');
    $(this).siblings().addClass('deactive');
});

$('body').on('click', '.block.active', function(){
    $('.block').find('.img-gap').fadeIn('300');
    $('.block').removeClass('active');
    $('.block').removeClass('deactive');
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.