正在加载中

最后更新于 2019年08月26日

普通切换效果

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;
});
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao

登录