如何在另一个列表之间控制另一个元素列表

Question

我在函数中有一个隐藏的列表，点击一个按钮就可以取消隐藏。在项目之间还有另一个列表做同样的事情：隐藏直到点击按钮。这里有一个例子：

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

它一直工作到3c结束。当我点击一个按钮继续时，一切都消失了。我正试图找到一种方法，在更改为第二个列表时，继续取消隐藏第一个列表中的列表。

我的代码：点击"单身下一个"前进。当3a出现时，单击"multi-next"直到3c。当点击3c后的"singlenext"时，它会消失。假设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兄弟姐妹来显示。

$('#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();
});

演示