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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
详解jquery和vue对比
Apr 16 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现聊天对话框
Feb 08 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 高手之路(一)
2006/10/09 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
经验几则 推荐
2006/09/05 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python学生管理系统学习笔记
2019/03/19 Python
selenium+python环境配置教程详解
2019/05/28 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python文件操作的简单方法总结
2019/11/07 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
师范大学应届生求职信
2013/11/21 职场文书
物流专业自荐信
2014/05/23 职场文书
岗位职责范本大全
2015/02/26 职场文书