多选

Question

我想做出选择。

1. 如果我按List1，它会显示所有类别Link1，其他人隐藏。
2. 然后我按下List2它会显示所有类Link2，并在第1步显示隐藏的链接。
3. 我按List3它显示所有类Link3，并显示第1和第2步的隐藏链接。 +我尝试使用$ .toggle（）进行“撤消”点击，但这不符合我的预期。

以下是我的例子：

HTML：

<table class="tg">
<tr>
    <td class="structure-left-side structure-left-side-idea">
        <h4>List1</h4>
    </td>
    <td class="structure-serviceinnova-links" rowspan="3">
        <p><a class="Link2" href="">Link2</a></p>
        <p><a class="Link1 Link2 Link3" href="">Link1 Link2 Link3</a></p>
        <p><a class="Link1" href="">Link1</a></p>
        <p><a class="Link1 Link3" href="">Link1 Link3</a></p>
        <p><a class="Link1 Link2" href="">Link1 Link2</a></p>
        <p><a class="Link3 Link2" href="">Link3 Link2</a></p>
        <p><a class="Link3" href="">Link3</a></p>
    </td>
    <td class="structure-project-links" rowspan="3">
    </td>
</tr>
<tr>
    <td class="structure-left-side structure-left-side-patent">
        <h4>List2</h4>
    </td>
</tr>
<tr>
    <td class="structure-left-side structure-left-side-startup">
        <h4>List3</h4>
    </td>
</tr>
</table>

JavaScript的：

$('.structure-left-side-idea>h4').on('click', function () {
    $(this).removeClass('hidden-link');
    var self = this;
    $('.structure-serviceinnova-links > p > a , .structure-project-links > p > a').each(function () {
        if (!$(this).hasClass('Link1')) {
            $(this).addClass('hidden-link');
            if ($(this).is(':hidden')) {
                $(this).removeClass('hidden-link');
            }
        }
    });
});
$('.structure-left-side-patent>h4').on('click', function () {
    $(this).removeClass('hidden-link');
    var self = this;
    $('.structure-serviceinnova-links > p > a , .structure-project-links > p > a').each(function () {
        console.log(this);
        if (!$(this).hasClass('Link2')) {
            $(this).addClass('hidden-link');
            if ($(this).is(':hidden')) {
                $(this).removeClass('hidden-link');
            }
        }
    });
});
$('.structure-left-side-startup>h4').on('click', function () {
    $(this).removeClass('hidden-link');
    var self = this;
    $('.structure-serviceinnova-links > p > a , .structure-project-links > p > a').each(function () {
        console.log(this);
        if (!$(this).hasClass('Link3')) {
            $(this).addClass('hidden-link');
            if ($(this).is(':hidden')) {
                $(this).removeClass('hidden-link');
            }
        }
    });
});

http://jsfiddle.net/mw008znx/11/

我真的希望有人可以帮助我解释或提出一些想法。