jQuery实现常见的隐藏与展示列表效果示例


Posted in jQuery onJune 04, 2018

本文实例讲述了jQuery实现常见的隐藏与展示列表效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3water.com jquery品牌列表效果</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel=" rel="external nofollow" stylesheet">
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  body {
    font: 16px/20px "Microsoft yahei,'微软雅黑'"
    color: #fff;
  }
  ul {
    list-style-type:none;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  ul li {
    float: left;
    text-align: right;
  }
  .clear:before,.clear:after {
    content: "";
    clear: both;
    display: table;
    height: 0;
    overflow: hidden;
    zoom: 1;
  }
  .SubCategoryBox {
    width: 473px;
    margin: 0 auto;
    border: 1px solid;
  }
  .SubCategoryBox ul{
    padding: 5px 10px;
  }
  .SubCategoryBox ul li {
    padding: 5px;
  }
  .SubCategoryBox ul li:nth-child(3n-2) {
    width: 130px;
  }
  .SubCategoryBox ul li:nth-child(3n-1) {
    width: 161px;
    margin-right: 30px;
  }
  .SubCategoryBox ul li:nth-child(3n) {
    width: 130px;
  }
  .showmore {
    text-align: center;
  }
  .showmore a {
    background: #eef;
    color: #CFCFE0;
  }
  .hightlight a,.hightlight i {
    color: red;
    /* font-weight: bold; */
  }
</style>
</head>
<body>
    <div class="SubCategoryBox">
      <ul class="clear" id="bancon">
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >佳能</a><i>(30441)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >索尼</a><i>(30442)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >三星</a><i>(30443)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >尼康</a><i>(30444)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >松下</a><i>(30445)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >卡西欧</a><i>(30446)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >富士</a><i>(30447)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >柯达</a><i>(30448)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >宾得</a><i>(30449)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >理光</a><i>(30450)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >奥斯巴林</a><i>(30451)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >明基</a><i>(30452)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >爱国者</a><i>(30453)</i></li>
        <li><a href="javascript:" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >其他品牌相机</a><i>(30454)</i></li>
      </ul>
      <div class="showmore" id="showpp">
      <a href=""><span>显示全部品牌</span></a>
      </div>
    </div>
   <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
   <script>
   $(function(){
    var $target=$("#bancon li:gt(5):not(:last)");
    $target.hide();
    var $toggleBtn=$("#showpp a");
    $toggleBtn.click(function(){
      if($target.is(":visible")){
      $target.hide();
      $(this).find("span").text("显示所有品牌");
      $("ul li").removeClass('hightlight')
      }
      else {
        $target.show();
        $(this).find('span').text("精简显示品牌");
        $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥斯巴林')").addClass('hightlight')
      }
      return false;  /*阻止a标签的跳转*/
    });
   });
   </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun测试效果如下:

jQuery实现常见的隐藏与展示列表效果示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
You might like
PHP - Html Transfer Code
2006/10/09 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
vuejs如何配置less
2017/04/25 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python对数据库操作
2016/03/28 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
《将心比心》教学反思
2014/04/08 职场文书
公司授权委托书范文
2014/08/02 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技