通过数据属性获取所有 div 直到答案

【问题标题】：Get all divs by data attribute until通过数据属性获取所有 div 直到
【发布时间】：2023-04-05 17:49:01
【问题描述】：

创建一个动态的、多级的 jquery 手风琴菜单，但是使用 div 而不是通常的 li 标签。

每个div都有一个数据属性（data-level），取值为1、2、3、4等……

我的“切换”功能需要显示/隐藏每个数据级别比它自己的更大的 div，直到它到达一个数据级别与其自己匹配的 div...

如果我有：

<div data-level="1">Sample Title</div>
    <div data-level="2">Sample Subtitle</div>
        <div data-level="3">Sample Subsubtitle</div>
    <div data-level="2">Sample Subtitle</div>

<div data-level="1">Sample Title</div>
    <div data-level="2">Sample Subtitle</div>
        <div data-level="3">Sample Subsubtitle</div>

然后单击第一个“示例标题”将同时切换“示例字幕”和“副标题”，但不会触摸第二个“示例标题”或其子项...当然，单击“副标题”会切换它的“副标题”，但不会影响任何其他元素。

有什么建议吗？

【问题讨论】：

标签： jquery html custom-data-attribute

【解决方案1】：

看看这个小提琴：http://jsfiddle.net/p4gps/1/

关键在这段代码中：

$('div').click(function() {
    var level = parseInt($(this).data('level'));
    if ($(this).hasClass('show')) {
        $(this).removeClass('show');
        $(this).nextAll('div').each(function() {
            if (parseInt($(this).data('level')) > level) $(this).hide().removeClass('show');
            else return false;
        });
    } else {
        $(this).addClass('show');
        $(this).nextAll('div').each(function() {
            if (parseInt($(this).data('level')) > level) $(this).show().addClass('show');
            else return false;
        });
    }
});

它对您单击的元素之后的所有 div 元素执行 $.each 。一旦它到达一个处于相同级别或更低级别的div，它就会跳出循环。

【讨论】：