1

Почему не работают мульти вложенные табы, когда родители обернуты в <div>? Конечно же не дает sublings, но как сделать по другому?

$('.link').on('click', function() {
  $(this).siblings('.link').removeClass('active');
  $(this).addClass('active');

  $(this).siblings('.tab').hide();

  var index = $(this).parent().children('.link').index( $(this) );  
  
  console.clear(); console.log(index);

  $(this).siblings('.tab').eq( index ).show();
});
	.tab {
  display: none;
}
.tab-content {
  display: none;
}
.tab-content>.tab>.tab-content {
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mama-tab">
        <!-- Первый уровень РОДИТЕЛИ-->
        <div>
        	<button class="link">iPhone 5</button>
        	<button class="link">iPhone 5S</button>
        	<button class="link">iPhone 5C</button>
                <button class="link">iPhone 6C</button>
                <button class="link">iPhone 7C</button>
        </div>
        <!-- Первый уровень ДЕТИ-->	
        	<div class="tab">
        		<button class="link">Попал в воду</button>
        		<button class="link">Не работает тачскрин</button>
        		<button class="link">Не работает дисплей</button>
        		
        		<div class="tab">Попал в воду - 3000 руб </div>
        		<div class="tab"></div>
        		<div class="tab"></div>
        	</div>
        <!-- Первый уровень ДЕТИ-->		
        	<div class="tab">
        		<button class="link">Попал в воду</button>
        		<button class="link">Не работает тачскрин</button>
        		<button class="link">Не работает дисплей</button>
        		
        		<div class="tab">Попал в воду - 4000 руб </div>
        		<div class="tab"></div>
        		<div class="tab"></div>
        	</div>
        <!-- Первый уровень ДЕТИ-->		
        	<div class="tab">
        		<button class="link">Попал в воду</button>
        		<button class="link">Не работает тачскрин</button>
        		<button class="link">Не работает дисплей</button>
        		
        		<div class="tab">Попал в воду - 5000 руб </div>
        		<div class="tab"></div>
        		<div class="tab"></div>
        	</div>
        	
        <!-- Первый уровень ДЕТИ-->		
        	<div class="tab">
        		<button class="link">Попал в воду</button>
        		<button class="link">Не работает тачскрин</button>
        		<button class="link">Не работает дисплей</button>
        		
        		<div class="tab">Попал в воду - 6000 руб </div>
        		<div class="tab"></div>
        		<div class="tab"></div>
        	</div>
        	
        	<!-- Первый уровень ДЕТИ-->	
        	<div class="tab">
        		<button class="link">Попал в воду</button>
        		<button class="link">Не работает тачскрин</button>
        		<button class="link">Не работает дисплей</button>
        		
        		<div class="tab">Попал в воду - 7000 руб </div>
        		<div class="tab"></div>
        		<div class="tab"></div>
        	</div>
        </div>

1
  • Оба $(this).siblings('.tab') → на $(this).parent().siblings('.tab').hide(); — так и читается: От кликнутого элемента - пойти к его родителю, отыскать среди его соседей элементы с классом .tab и скрыть их. Но тогда придется и вложенные кнопки завернуть в дополнительные блоки. Но глядя на разметку, подозреваю, что легче было бы сделать один большой объект со всеми необходимыми пунктами... а при клике - рисовать HTML из объекта. 6 ноя 2019 в 8:17

1 ответ 1

3

Добавил класс для главных ссылок ( 1 уровня ). Что бы для них правильно находились соседи и чуть чуть стилей

$('.link').on('click', function() {
  $(this).siblings('.link').removeClass('active');
  $(this).addClass('active');

  const index = $(this).parent().children('.link').index( $(this) );
  
  let linksBlock = $(this).closest('.main-links');
  if (linksBlock.length === 0) {
    linksBlock = $(this);
  }

  linksBlock.siblings('.tab').hide();
  linksBlock.siblings('.tab').eq(index).show();
});
.tab {
  display: none;
}

.tab-content {
  display: none;
}

.link {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 5px;
  padding: 3px 8px;
  cursor: pointer;
}

.link:focus {
  outline: none;
}

.link.active {
  border: 1px solid #000;
}

.content {
  margin: 5px;
  padding: 10px;
  border: 1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mama-tab">
  <!-- Первый уровень РОДИТЕЛИ-->
  <div class='main-links'>
    <button class="link">iPhone 5</button>
    <button class="link">iPhone 5S</button>
    <button class="link">iPhone 5C</button>
    <button class="link">iPhone 6C</button>
    <button class="link">iPhone 7C</button>
  </div>
  <!-- Первый уровень ДЕТИ-->	
    <div class="tab">
      <button class="link">Попал в воду</button>
      <button class="link">Не работает тачскрин</button>
      <button class="link">Не работает дисплей</button>

      <div class="tab content">Попал в воду - 3000 руб </div>
      <div class="tab content">Не работает тачскрин - 5000 руб</div>
      <div class="tab content">Не работает дисплей - 10000 руб</div>
    </div>
  <!-- Первый уровень ДЕТИ-->		
    <div class="tab">
      <button class="link">Попал в воду</button>
      <button class="link">Не работает тачскрин</button>
      <button class="link">Не работает дисплей</button>

      <div class="tab content">Попал в воду - 4000 руб </div>
      <div class="tab content">Не работает тачскрин - 5000 руб</div>
      <div class="tab content">Не работает дисплей - 10000 руб</div>
    </div>
  <!-- Первый уровень ДЕТИ-->		
    <div class="tab">
      <button class="link">Попал в воду</button>
      <button class="link">Не работает тачскрин</button>
      <button class="link">Не работает дисплей</button>

      <div class="tab content">Попал в воду - 5000 руб </div>
      <div class="tab content">Не работает тачскрин - 5000 руб</div>
      <div class="tab content">Не работает дисплей - 10000 руб</div>
    </div>

  <!-- Первый уровень ДЕТИ-->		
    <div class="tab">
      <button class="link">Попал в воду</button>
      <button class="link">Не работает тачскрин</button>
      <button class="link">Не работает дисплей</button>

      <div class="tab content">Попал в воду - 6000 руб </div>
      <div class="tab content">Не работает тачскрин - 5000 руб</div>
      <div class="tab content">Не работает дисплей - 10000 руб</div>
    </div>

    <!-- Первый уровень ДЕТИ-->	
    <div class="tab">
      <button class="link">Попал в воду</button>
      <button class="link">Не работает тачскрин</button>
      <button class="link">Не работает дисплей</button>

      <div class="tab content">Попал в воду - 7000 руб </div>
      <div class="tab content">Не работает тачскрин - 5000 руб</div>
      <div class="tab content">Не работает дисплей - 10000 руб</div>
    </div>
</div>

Сейчас правда между табами сохраняется стейт дочерних табов. Нужно вам это или нет, решайте сами. В любом случае, для решения именно этой проблемы, лучше подумать об архитектуре ( выносе активного таба в стейт и так далее )

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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