jquery - 如何隐藏特定的的并在特定的时候显示它被点击？

Question

我想要发生的是我想隐藏与其他人相等的<li>' s 。并在单击时显示那些s ？parent_id<li>group_id<li>'<li>'

这是我的示例<ul>，它是 PHP 生成的。

PHP代码：

foreach($navs as $nav){
                                            echo '<li parent_id="'.$nav['parent_id'].'" group_id="'.$nav['group_id'].'"><a href="#'.$nav['group_id'].'" class="scroll" title="'.$nav['nav'].'">'.$nav['nav'].'</a></li>';
                                        }

样本输出：

Answer 1

你可以试试

$('#navigitions li[parent_id!="1"]').hide();

function hideSubItems(siblings) {
    if(siblings.length == 0) {
        return;
    }

    siblings.each(function(){
        var siblings = $(this).siblings('[parent_id="' + $(this).attr('group_id') + '"]').hide();
        hideSubItems(siblings)
    });
}

$('#navigitions li').click(function(){
        var siblings = $(this).siblings('[parent_id="' + $(this).attr('group_id') + '"]').toggle();
        hideSubItems(siblings)
    });

演示：小提琴

Answer 2

var ids = [],
    $li = $('li');

// Collect all group IDs
$li.each(function () {
    var group_id = $.attr(this, 'group_id');
    if ( ! ~$.inArray(group_id, ids) ) ids.push(group_id);
})
// Hide any li whose parent_id is in the ids array
.each(function () {
    if ( ~$.inArray($.attr(this, 'parent_id'), ids) ) $(this).hide();
})
// When an li is clicked, show any li whose parent_id is equal to this group_id
.click(function () {
    $li.filter('[parent_id=[' + $.attr(this, 'group_id') + ']').show();
});