使用jquery切换列表

使用jquery进行列表的切换
（1）为代码添加css样式
（2）从第八条开始隐藏，当用户点击“显示全部品牌”的时候会显示隐藏的品牌（除了最后一条),并且进行文本的切换，高亮特定品牌。
（3）当用户点击“显示部分品牌”的时候会隐藏显示的品牌（除了最后一条),并且进行文本的切换，去除高亮。

       $(function(){

        var items=$('ul li:gt(6):not(:last)');//获取索引值大于6的集合对象（不包括最后一条）

        items.hide();//隐藏获取到的对象

        var toggleBtn=$('div.more>a'); //获取显示全部品牌按钮

        toggleBtn.click(function(){

          if(items.is(":visible")){

            items.hide();

            $(this).find('span').text("显示全部品牌");//改变文本
            $('ul li').removeClass('active');//去掉高亮

          }else{
            items.show();

            $(this).find('span').text("显示部分品牌");

            $('ul li').filter(":contains('华为'),:contains('小米'),:contains('魅族')")
            .addClass('active') ;    
          }

           return false;//不进行超链接跳转
        })
       })

 <div class="simplify">
        <ul>
          <li><a href="#">苹果</a><i>(1001)</i></li>
          <li><a href="#">华为</a><i>(1002)</i></li>
          <li><a href="#">三星</a><i>(1003)</i></li>
          <li><a href="#">小米</a><i>(1004)</i></li>
          <li><a href="#">索尼</a><i>(1005)</i></li>
          <li><a href="#">vivo</a><i>(1006)</i></li>
          <li><a href="#">坚果</a><i>(1007)</i></li>
          <li><a href="#">乐视</a><i>(1008)</i></li>
          <li><a href="#">魅族</a><i>(1009)</i></li>
          <li><a href="#">诺基亚</a><i>(1010)</i></li>
          <li><a href="#">摩托罗拉</a><i>(1011)</i></li>
          <li><a href="#">海信</a><i>(1012)</i></li>
          <li><a href="#">奇酷</a><i>(1013)</i></li>
          <li><a href="#">其他品牌手机</a><i>(1032)</i></li>
        </ul>
         <div class="more">
         <a href="#"><span>显示全部品牌</span></a>
         </div>
      </div>