Question

我有一个包含分隔组的列表组，这意味着列表组中有行通过按类分配列表中的标题行来分隔/分组它们。我试图只隐藏组内的列表，我不想隐藏像这个代码那样的所有列表对象。有没有人知道如何单独隐藏组，所以当你点击组的标题时它只隐藏该组中的列表 （不修改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/

Answer 1

我认为你是在追求这样的事情： -

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

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

Here's a fiddle

Answer 2

好的尝试这种方法：

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

Answer 3

~~这很糟糕，但无需修改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();

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

3 个答案:

Here's a fiddle