在对象之后获取一系列对象，并相应地隐藏/显示它们

Getting a range of objects after an object and hide/show them accordingly

本文关键字：对象 隐藏 显示 获取 之后 一系列      更新时间：2023-09-26

我有一个列表组，它有单独的组，这意味着列表组中有行通过按类分配列表中的标题行来对它们进行分离/分组。我试图只隐藏组内部的列表，我不想像这段代码那样隐藏所有列表对象。有人知道如何只单独隐藏组吗？因此，当您单击组的标题时，它只会隐藏该组内的列表（不修改HTML代码中的任何标记）。特别是在参考下面的代码示例时，如果有人单击"标题2"，则只有在"标题3"之后和之前的<li>会消失/重新出现。请参阅下面的代码：

HTML:

<ul>
<li class="title">Title 1</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="title">Title 2</li>
<li></li>
<li></li>
<li></li>
<li class="title">Title 3</li>
<li></li>
<li></li>
<li></li>
</ul>

jQuery/Js:

$("ul li.title").click(function(){
  $("ul li").not(".title").toggle();    
});

你可以在这里找到小提琴：http://jsfiddle.net/QNNgE/

我想你在追求这样的东西：-

$(this).nextUntil('li.title').toggle();

因此，当单击标题时，切换单击标题后所有元素的可见性，直到下一个。

这是一把小提琴

好的，试试这个方法：

HTML:

<ul>
    <li class="title">Title 1</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li class="title">Title 2</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li class="title">Title 3</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jquery:

$("ul li.title").click(function(){
    $(this).nextAll().toggle();    
});

希望这能有所帮助。

jsFiddle

这很了不起，但可以按要求工作，而无需修改HTML:

编辑：啊，我明白我误解了这个问题。

在任何情况下，它都可以在不修改HTML的情况下执行类似的操作（类似手风琴）。

$("ul li.title").click(function(){
    var title = $(this);
    var inGroup = false;
    title.parent().children().each(function(){
        var li = $(this);
        if (li.hasClass('title')) {
            inGroup = li.get(0) == title.get(0);
        } else {
            if (inGroup) {
                li.show();
            } else {
                li.hide();
            }
        }
    });
});
$("ul li.title").eq(0).click();
相关文章：