Javascript 隐藏某些div（不嵌套）

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

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

我现在想做的是：

使标题1可点击 单击后，隐藏所有未嵌套且无法嵌套的基础div 再次单击标题1将再次显示以前隐藏的div 仅隐藏标题后面的div，直到下一个标题 解决方案可以使用jQuery或类似的框架。

试试看

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

演示：

---

底层逻辑很简单-通过添加单击处理程序使id以TITLE clickable开头的div可单击-为此，使用选择器。然后查找单击的元素和id以TITLE开头的下一个元素之间的所有div-这是使用遍历方法完成的。然后用于隐藏/显示元素

可能类似以下内容：

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

<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); 
    });
});

演示：

---

也就是说，每当单击id以文本标题开头的div时，使用选择每个元素直到下一个此类div，然后切换其可见性。

如果可以将title1和div-元素包装在一个div中，则会更容易。然后可以检测到对title1的单击，抓取父对象，然后隐藏除title div之外的所有子对象

大概是这样的：

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

<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); 
    });
});

---

你在哪里遇到麻烦？你想演奏手风琴？？所有的舞曲都是相互独立的。我不想按名称调用每个div并隐藏为数字，ID可能会有所不同。我还没有真正编写任何代码，首先尝试想出一个好的灵活的解决方案。少写，多做才是真正准确的。@RokoC.Buljan你看过我的全部答案了吗？但是，如果HTML无法编辑，那么这样的解决方案就足够了：要使用原始HTML，我认为您需要从答案末尾的代码中删除.find'div[id^=div-]，因为.nextUntil将已经选择了您需要的div，然后.find将找不到任何内容。