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 you have read our privacy policy.

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