0

创建一个动态的、多级的 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>

然后点击第一个“Sample Title”会切换“Sample Subtitle”和“Subsubtitle”，但不要触摸第二个“Sample Title”或其子项......当然，点击“Subtitle”会切换它“副标题”，但不影响任何其他元素。

有什么建议吗？

4

1 回答 1

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，它就会跳出循环。

于 2013-06-12T01:54:09.353 回答