Почему не работают мульти вложенные табы, когда родители обернуты в <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>
$(this).siblings('.tab')
→ на$(this).parent().siblings('.tab').hide();
— так и читается: От кликнутого элемента - пойти к его родителю, отыскать среди его соседей элементы с классом .tab и скрыть их. Но тогда придется и вложенные кнопки завернуть в дополнительные блоки. Но глядя на разметку, подозреваю, что легче было бы сделать один большой объект со всеми необходимыми пунктами... а при клике - рисовать HTML из объекта.