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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 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
建立动态的WML站点(三)
2006/10/09 PHP
第五节--克隆
2006/11/16 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
use jscript List Installed Software
2007/06/11 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
JavaScript编写开发动态时钟
2020/07/29 Javascript
python list语法学习(带例子)
2013/11/01 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python3中详解fabfile的编写
2018/06/24 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
中文专业毕业生自荐信
2013/10/28 职场文书
司机辞职报告范文
2014/01/20 职场文书
运动会稿件100字
2014/02/21 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
python 实现定时任务的四种方式
2021/04/01 Python