gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:00:57 24 4
gpt4 key购买 nike

我正在使用自动生成的遗留代码,并且必须遵守以下结构:

<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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com