1

我有一个具有单独组的列表组，这意味着列表组中有行通过按类分配列表中的标题行来分隔/分组它们。我试图只隐藏组内的列表，我不想像这段代码那样隐藏所有列表对象。有谁知道如何只单独隐藏组，所以当您单击组的标题时，它只会隐藏该组内的列表（不修改 HTML 代码中的任何标签）。具体来说，当参考下面的代码示例时，如果有人点击“标题 2”，那么只有在<li>那之后和“标题 3”之前的那些会消失/重新出现。请看下面的代码：

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/

4

3 回答 3

1

我想你在追求这样的事情： -

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

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

这是一个小提琴

于 2013-08-08T08:11:41.330 回答
0

好的试试这个方法：

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

于 2013-08-08T08:11:19.297 回答
0

这太棒了，但无需修改 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();
于 2013-08-08T08:16:40.653 回答