Question

我正在使用自动生成的遗留代码，并且必须符合以下结构：

<div id="TITLE1"></div>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>
.... (there can be more divs here, IDs can vary as well) ...
<div id="TITLE2"></div>

我现在想做的是：

点击TITLE1
点击后隐藏所有基础DIVs（不嵌套且无法嵌套）
点击TITLE1再次显示之前隐藏的DIVs
仅隐藏DIVs后跟TITLE（不包括）的TITLE

解决方案可能使用jQuery或此类框架。

Answer 1

尝试

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').toggle();
})

演示：Fiddle

底层逻辑很简单 - 通过添加点击处理程序，使id为TITLE可点击的div成为可能 - 使用attribute starts with选择器。然后找到被点击的元素和id为TITLE的下一个元素之间的所有div - 这是使用.nextUntil()遍历方法完成的。然后.toggle()用于隐藏/显示元素

Answer 2

也许是这样的：

$(document).ready(function() {
    $("body").on("click", 'div[id^="TITLE"]', function() {
        $(this).nextUntil('div[id^="TITLE"]').slideToggle();
    });
});

演示：http://jsfiddle.net/cjZzG/

也就是说，只要点击以“TITLE”文本开头的id的div，就可以使用.nextUntil() method选择每个元素直到下一个这样的div，然后切换它们的可见性。

Answer 3

如果可以将title1和div-#元素包装在一个div中，会更容易。然后你可以检测到title1上的点击，抓住父母然后隐藏所有孩子但是标题div。

这样的事情：

<div>
    <div class="title">Toggle divs</div>
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
    <div id="div3">Div3</div>
</div>
<div>
<div class="title">Toggle divs</div>
    <div id="div1">Div4</div>
    <div id="div2">Div5</div>
    <div id="div3">Div6</div>
</div>      

$(document).ready(function() {
    $('.title').click(function() {
       $(this).parent().children().not('.title').toggle(1000); 
    });
});

这是我将使用的解决方案，因为它逻辑地对元素进行分组：更好的搜索引擎优化和代码的可读性。

http://jsfiddle.net/WBH7C/

但是，如果无法编辑HTML，那么这样的解决方案就足够了：

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').find('div[id^=div-]').toggle();
})

隐藏某些DIV（不幸的是没有嵌套）

3 个答案: