3

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

<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 或此类框架。

4

3 回答 3

10

尝试

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

演示：小提琴

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

于 2013-08-26T10:55:41.107 回答
2

也许是这样的：

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

演示：http: //jsfiddle.net/cjZzG/

也就是说，每当id单击以文本“TITLE”开头的 div 时，使用该.nextUntil()方法选择每个元素直到下一个此类 div，然后切换它们的可见性。

于 2013-08-26T10:56:58.093 回答
0

如果您可以将title1anddiv-#元素包装在一个 div 中，会容易得多。然后你可以检测到点击title1，抓住父级然后隐藏除标题 div 之外的所有子级。

像这样的东西：

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

这是我将使用的解决方案，因为它对元素进行了逻辑分组：更好的 SEO 和代码的可读性。

http://jsfiddle.net/WBH7C/

但是，如果无法编辑 HTML，那么这样的解决方案就足够了：

$('div[id^=TITLE]').click(function(){
    $(this).nextUntil('div[id^=TITLE]').find('div[id^=div-]').toggle();
})
于 2013-08-26T11:02:18.213 回答