Question

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

每个div都有一个数据属性（数据级别），值为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>

然后点击第一个“样本标题”将切换“Sample Subtitle”和“Subsubtitle”，但不会触及第二个“Sample Title”或其子代......当然，点击“Subtitle”会切换它的“子字幕”，但不影响任何其他元素。

有什么建议吗？

Answer 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，它就会突破循环。

按数据属性获取所有div，直到

1 个答案: