javascript - 隐藏某些 DIV(不幸的是没有嵌套)

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 可点击
• 单击后隐藏所有底层 DIV(未嵌套且无法嵌套)
• 再次点击 TITLE1 会再次显示之前隐藏的 DIV
• 只隐藏 TITLE 到下一个 TITLE 之后的那些 DIV(不包括)

解决方案可能会使用 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()用于隐藏/显示元素