隐藏某些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可点击
• 点击后隐藏所有底层DIVs(不嵌套,不可能嵌套)
• 再次单击会再次TITLE1显示之前隐藏的内容DIVs
• 只隐藏那些DIVs跟随TITLE下一个TITLE(不包括)的人

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

Answer 1

尝试

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

演示:小提琴

底层逻辑很简单 - TITLE通过添加一个单击处理程序来创建id为以可点击开头的div - 使用选择器来启动此属性.然后找到clicked元素和id开头的下一个元素之间的所有div TITLE- 这是使用.nextUntil()遍历方法完成的.然后.toggle()用于隐藏/显示元素