仿当当移动端筛选

所属分类:UI-筛选及排序

 37001  355  查看评论 (4)
分享到微信朋友圈
X
仿当当移动端筛选 ie兼容8

筛选分类的子类没有限制,可以没有子类,可以多达6级甚至更多子类,无需任何设置,样式和js都已经做好了。

导航和分类的显示隐藏就不细说了,非常的简单。导航是使用CSS3的transition过渡属性做的,分类则是使用jQuery的animate()动画函数做的。

一级分类的滑动使用了Swiper插件,官网有API,这里简单的介绍一下使用了哪些方法:

/*分类滑动与切换*/
var categorySwiper = new Swiper(".wap-category-nav", { //新建Swiper
    direction: "vertical",
    //纵向滚动
    slidesPerView: "auto",
    //幻灯片视图高度(宽度)自动
    onSlideChangeEnd: function(swiper) { //切换结束后
        var categoryAct = categorySwiper.activeIndex; //获得当前一级分类的索引
        $(".wap-category-sec").eq(categoryAct).show().siblings().hide(); //显示当前一级分类对应的二级分类,隐藏其他的二级分类
    },
    onTap: function(swiper, event) { //点击事件
        var categoryAct = categorySwiper.clickedIndex; //获得被点击的一级分类的索引
        categorySwiper.slideTo(categoryAct, 1000, false); //把被点击的一级分类滚动到顶部
        $(".wap-category-nav ul li").eq(categoryAct).addClass("swiper-slide-active").siblings("li").removeClass("swiper-slide-active");
        $(".wap-category-sec").eq(categoryAct).show().siblings().hide(); //显示当前一级分类对应的二级分类,隐藏其他的二级分类
    }
});


相关插件-筛选及排序

jquery仿app产品筛选列表

jquery仿app产品筛选列表
  筛选及排序
 51853  384

前端表格排序插件,支持ajax分页

jQuery前端表格排序插件,支持ajax分页,后端分页只排序当前页,或前端分页排序
  筛选及排序
 33609  354

table 点击排序 三种方法

不用通过数据交互那么复杂,可以简单的静态排序和筛选,适用于后台数据列表等需求
  筛选及排序
 36214  354

jQuery图片筛选过滤器效果

jQuery选项卡形式图片按分类过滤
  筛选及排序
 34757  539

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    0
    2021/5/30 14:22:52
    - 孩子气 0
    2018/8/22 9:22:51
    老哥 下完了 东西呢? 压缩文件里怎么是空的?
        锐不可当0
        2018/8/24 14:11:15
        不清楚,我下载有东西啊,你邮箱是多少,我发给你
    回复
    Shadow 0
    2017/12/8 13:45:53
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复