品牌列表效果

普通切换效果

html代码：

 <div class="box">
      <ul>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">索尼<i>(30440)</i></a></li>
          <li><a href="#">三星<i>(30440)</i></a></li>
          <li><a href="#">尼康<i>(30440)</i></a></li>
          <li><a href="#">松下<i>(30440)</i></a></li>
          <li><a href="#">卡西欧<i>(30440)</i></a></li>
          <li><a href="#">富士<i>(30440)</i></a></li>
          <li><a href="#">柯达<i>(30440)</i></a></li>
          <li><a href="#">宾得<i>(30440)</i></a></li>
          <li><a href="#">理光<i>(30440)</i></a></li>
          <li><a href="#">奥林巴斯<i>(30440)</i></a></li>
          <li><a href="#">明基<i>(30440)</i></a></li>
          <li><a href="#">爱国者<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">佳能<i>(30440)</i></a></li>
          <li><a href="#">其他品牌<i>(30440)</i></a></li>
      </ul>
      <div class="showmore">
          <a href="https://www.baidu.com"><span>显示全部品牌</span></a>
      </div>
  </div>

css代码：

html,body {
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.box {
    width: 500px;
    border: 1px solid #000;
    transition: all .5s;
}
.box ul li {
   display: inline-block;
    width: 30%;
    line-height: 30px;
    color: #666;
}

.showmore {
    padding: 10px;
    text-align: center
}
.showmore span {
    display: inline-block;
    padding: 5px 15px;
    background-color: #1eafe9;
    color: #fff;
    border-radius: 4px;
    transition: background-color .3s;
}
.promoted {
    color: aqua !important;
    font-weight: bold;
}

jQuery代码：

var $category = $('ul li:gt(5):not(:last)');
    $category.hide();    
    $('div.showmore > a').click(function(){
        if($category.is(':visible')){
            $category.hide();
            $('.box ul li').removeClass('promoted');
            $(this).find('span').css('background-color','#1eafe9');
            $('.showmore span').text('显示完整列表');
        }else {
            $category.show();
            $('.box ul li').filter(':contains("索尼"),:contains("宾得"),:contains("明基")')
            .addClass('promoted');
            $(this).find('span').css('background-color','#237191');
            $('.showmore span').text('显示精简列表');
        };
        return false;
    });

效果图：

通过该代码，可以对这个li元素区间性显示隐藏，并且显示全部li元素后，可以针对性的筛选含有对应文字的元素添加class，也就是filter()方法。

这里详细说一下一些方法

is(）

该方法通过判断你填入的选择器来返回布尔值，比如我在这里使用了is(‘:visible’)判断这个元素集合里是否都是显示。

find()

find()方法用于获取所有父元素下的对应的元素，注意，他获取的不单单是子元素，子元素下子元素只要是一样的都会获取到，以此类推。

filter()

filter()方法可以批量筛选该元素，拿上面的代码来说，筛选的是li元素集合，然后可以多个判断的值，用逗号隔开，使用选择器筛选，我们使用了contains()来判断这个li里面是否含有对应的文本内容，如果有就将对应的这个li元素保存到jq的数组对象里面，然后返回，再添加class。

注意：

filter筛选的是该元素，而find筛选的是该元素里面的元素，作用的点不同。所以，$(‘ul li’).filter(‘a’)这种写法来获取里面的a元素是不对的。

事实上我们使用了if语句来判断到底是显示还是隐藏，但是从代码上来说，还有更简单的方法。

toggle()方法

该方法可以让元素在显示和隐藏之间进行切换，并且还有动效

$('div.showmore > a').click(function(){
  $category.toggle();
  return false;
});