我正在使用自动生成的遗留代码，并且必须遵守以下结构:
<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 或此类框架。
最佳答案
尝试
$('div[id^=TITLE]').click(function(){
$(this).nextUntil('div[id^=TITLE]').toggle();
})
演示:Fiddle
底层逻辑很简单 - 通过添加点击处理程序使 id 以 TITLE 开头的 div 可点击 - 为此 attribute starts with使用选择器。然后找到被点击的元素和下一个 ID 以 TITLE 开头的元素之间的所有 div - 这是使用 .nextUntil() 完成的遍历法。那么.toggle()用于隐藏/显示元素
关于javascript - 隐藏某些 DIV(不幸的是没有嵌套)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18442347/