Как управлять другим списком элементов между другим списком

Question

У меня есть список функций, которые скрыты, и нажатие кнопки показывает их. Между пунктами есть еще один список, который делает то же самое: скрытый до нажатия кнопки. Вот пример:

• 1
• 2
• 3a
• 3b
• 3c
• 4
• 5

Работает нормально до конца 3с. Когда я нажимаю кнопку, чтобы продолжить, все исчезает. Я пытаюсь найти способ продолжить показ списка в первом списке при переходе ко второму списку.

Мой код: нажмите «один следующий», чтобы перейти вперед. Когда появится 3a, нажимайте 'multi next' до 3c. При нажатии на «один следующий» после 3с, он исчезает. 4 должно показать 5

$("#multi-single-next").click(function () { 
  var index = $('.pagnation').find('li:visible').index();
  if ($(this).hasClass('prev')) {
    index = index == 0 ? 0 : (index - 1);
  } else {
    var totalLiElem = $('.pagnation').find('li').length
    index = (index == (totalLiElem - 1)) ? (totalLiElem - 1) : (index + 1);
  }
  $('.pagnation').find('li:visible').fadeToggle("fast", "linear", function() {
    $('.pagnation').find('li:eq(' + index + ')').fadeToggle(550, "linear");
  });
});
$('.pagnation-2 li:gt(0)').hide();
$('#multi-next-multi-item').click(function() {
    var last = $('.pagnation-2').children('li:visible:last');
    last.nextAll(':lt(1)').fadeToggle('slow').show();
    last.next().prevAll().fadeToggle('slow').hide();
});

.pagnation li {
    display: inline-block;
    list-style: none;
  }
  .pagnation li:not(:first-child) {
    display: none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<ul class="pagnation">
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items"><ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
</li></ul>
<li class="single-data-item"><div class="data-item">4</div></li>
<li class="single-data-item"><div class="data-item">5</div></li>

Answer 1

Это то, что вы хотите?

Я удаляю индекс и использую класс active вместо текущего индекса. Следующий LI может быть просто показан с использованием .next sibling.

$('#multi-single-next').click(function() {
    let $item;

    if(!$('ul.pagnation li.single-data-item.active').length) {
        $item = $('ul.pagnation li.single-data-item').first();
    }
    else {
        $prev = $('ul.pagnation li.single-data-item.active');
        $item = $prev.next();

        if(!$prev.next().length) {
            $prev.removeClass('active');
            $prev.hide();
            return;
        }

        $prev.removeClass('active');
        $prev.hide();
    }

    $item.addClass('active');
    $item.show();

    // sub items
    $('ul.pagnation-2 li').removeClass('active');
    if($item.hasClass('has-multi-items')) {
        const $sub = $item.find('ul li').first();
        $sub.addClass('active');
        $sub.show();
    }
});


$('#multi-next-multi-item').click(function() {
    const $item = $('ul.pagnation-2 li.active');
    const $next = $item.next();

    $item.removeClass('active');
    $item.hide();

    $next.addClass('active');
    $next.show();
});

DEMO