如何在另一个列表之间控制另一个元素列表 [英] How to control another list of elements in between another list

问题描述

我有一个隐藏的功能列表，单击按钮可以取消隐藏它们.在项目之间还有另一个执行相同操作的列表:隐藏直到单击按钮.这是一个示例:

I have a list in function that are hidden and a click of a button unhides them. There's another list in between items that does the same thing: hidden until a button is clicked. Here's an example:

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

它可以正常工作到3c结束.当我单击一个按钮继续时，所有内容都消失了.我正在尝试找到一种方法，当更改为第二个列表时，可以继续取消隐藏第一个列表中的列表.

It works fine until the end of 3c. When I click a button to continue, everything disappears. I'm trying to find a way to continue to unhide a list in the first list when changing to the second list.

我的代码:单击下一步".当3a出现时，单击"multi next"，直到3c.当点击3c之后的下一步"时，它消失了.假设4显示然后5

My code: Click on 'single next' to advance. When 3a appears, click 'multi next' until 3c. When click on 'single next' after 3c, it disappears. 4 is suppose to show then 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>

推荐答案

这就是您想要的?

我删除索引，并使用类active作为当前索引. 可以使用 .next 兄弟来简单显示下一个LI.

I remove index and use class active instead as current index. Next LI can be simple simply showed with using .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();
});

演示

这篇关于如何在另一个列表之间控制另一个元素列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！