更新于

品牌列表效果

发布于 / 分类: 锋利的JQuery / 暂无评论 / 阅读量: 461

普通切换效果

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;
});

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局

购买