0

Ситуация следующая, в идеале всё должно работать следующим образом: при клике на .nav - открывается весь контент, при клике на табы переключаются только табы (контент не сворачивается), класс active дается item и nav.

Не могу никак переделать, чтоб клик был на nav и при этом давался класс active для item который мы выбрали и nav на которой кликнули, соответственно если по второму nav тыкнуть, прошлый айтем сворачивается и классы active убираются.

Как это всё поправить ?

// Click-open
$('.item').click(function() {
    $('.nav', $(this)).toggleClass('active');
    $('.content', $(this)).slideToggle();

    var siblings = $(this).siblings();
    siblings.removeClass('active');
    var navSiblings = $('.nav', $(this)).siblings();
    navSiblings.removeClass('active');
    $('.content', siblings).slideUp();
	});

// TABS
$(".item .content .tabs .tab").click(function() {
		$(".item .content .tabs .tab").removeClass("active").eq($(this).index()).addClass("active");
		$(".item .content .for-tabs .cont").hide().eq($(this).index()).fadeIn();
	}).eq(0).addClass("active");
.item {
  cursor: pointer;
}
.item.active {
  background-color: yellow;
}
.item .content {
  display: none;
}
.item .nav.active {
  background-color: blue;
  display: inline-block;
}
.item .content .tabs .tab {
  display: inline-block;
}
.item .content .for-tabs .cont:first-child {
  display: block;
}
.item .content .for-tabs .cont {
  display: none;
}
<div class="item">
  <div class="nav">Клик</div>
  <div class="content">
    <div class="tabs">
      <div class="tab">Таб 1</div>
      <div class="tab">Таб 2</div>
    </div>
    <div class="for-tabs">
      <div class="cont">Контент 1</div>
      <div class="cont">Контент 2</div>
    </div>
  </div>
</div>

<div class="item">
  <div class="nav">Клик</div>
  <div class="content">
    <div class="tabs">
      <div class="tab">Таб 1</div>
      <div class="tab">Таб 2</div>
    </div>
    <div class="for-tabs">
      <div class="cont">Контент 1</div>
      <div class="cont">Контент 2</div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

1 ответ 1

2

Примерно так:

// Click-open
$('.item .nav').click(function() {
  $('.item .nav.active ~ .content').slideUp();
  $('.item.active').removeClass('active');
  if (!$(this).hasClass('active')) {
    $('.item .active').removeClass('active');
    $(this).addClass('active');
    $(this).closest('.item').addClass('active');
    $('~ .content', this).slideDown();
  } else {
    $('.item .active').removeClass('active');
  }
});

// TABS
$(".item .content .tabs .tab").click(function() {
  var cnt = $(this).closest('.content');
  $('.for-tabs .cont', cnt).hide().eq($(this).index()).fadeIn();
});
.item {
  cursor: pointer;
}

.item.active {
  background-color: yellow;
}

.item .content {
  display: none;
}

.item .nav.active {
  background-color: blue;
  display: inline-block;
}

.item .content .tabs .tab {
  display: inline-block;
}

.item .content .for-tabs .cont:first-child {
  display: block;
}

.item .content .for-tabs .cont {
  display: none;
}
<div class="item">
  <div class="nav">Клик</div>
  <div class="content">
    <div class="tabs">
      <div class="tab">Таб 1</div>
      <div class="tab">Таб 2</div>
    </div>
    <div class="for-tabs">
      <div class="cont">клик 1 Контент 1</div>
      <div class="cont">Контент 2</div>
    </div>
  </div>
</div>

<div class="item">
  <div class="nav">Клик</div>
  <div class="content">
    <div class="tabs">
      <div class="tab">Таб 1</div>
      <div class="tab">Таб 2</div>
    </div>
    <div class="for-tabs">
      <div class="cont">Контент 1</div>
      <div class="cont">Контент 2</div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Клик нужно слушать по кнопке переключения таба а не по контейнеру.

У вас бардак в самой логике, зачем давать active для item, nav, когда достаточно для одного item? И не рекоммендую делать сворачивание и анимацию на jquery, достаточно манипулировать классами и анимировать в css.

4
  • Понял, спасибо, на jQuery это не нужно делать, потому что проще на css ? 23 авг 2017 в 6:07
  • 1
    Не проще, а правильнее и быстрее в плане производительности. И чище в логике. И не словите багов например если анимация не закончилась а вы ей заново говорите анимироваться. 23 авг 2017 в 6:11
  • А как сделать, чтоб изначально у Таб 1 был класс active а потом уже он переключался, а то выходит, что блок раскрывается, там есть контент первого таба, но сам таб без класса active 23 авг 2017 в 6:30
  • Вроде по умолчанию все закрыто же. Чтобы открыть можно имитировать событие клика по вкладке $('.item .nav:first').trigger('click'); 23 авг 2017 в 6:33

Ваш ответ

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

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