jQuery点击过滤器列表

抱歉，但我对js还很陌生。基本上，我在顶部有主导航(#filter(，然后我有3个其他列表(#one、#two和#three(。

我想做的是，当单击All时，它会显示来自#one、#two和#three的所有列表项。然后，当单击One时，它只显示来自#one的列表项、来自#two的Two和来自#three的Three。

这是有帮助的标记。

<ul id="filter">
  <li class="current">
    <a href="#">All</a>
  </li>
  <li>
    <a href="#">One</a>
  </li>
  <li>
    <a href="#">Two</a>
  </li>
  <li>
    <a href="#">Three</a>
  </li>
</ul>
<ul id="one">
  <li>
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">1</a>
  </li>
</ul>
<ul id="two">
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
</ul>
<ul id="three">
  <li>
    <a href="#">3</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
</ul>

$(function() {
    $('#filter a').on('click', function(e) {
        e.preventDefault();
        var clicked = $.trim( $(this).text().toLowerCase() );
        if ( clicked == 'all' ) {
            $('#one, #two, #three').show();
        }else{
            $('#one, #two, #three').hide();
            $('#' + clicked).show();
        }
        $(this).closest('li')
               .addClass('current')
               .siblings()
               .removeClass('current');
    });
});