案例效果：

点击显示全部奶粉品牌前：

点击后：

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>JQUERY</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        li {
            /*去掉无序列表项的小圆点*/
            list-style-type: none;
            /*每个无序列表项占父元素宽度的三分之一,这里的父元素为div元素，因为div会占满窗口的整个宽度
            ，所以就相当于每个无序列表项占浏览器窗口宽度的三分之一*/
            width: 33%;
            /*向左靠齐*/
            float: left;
        }
        a {
            color: grey;
            /*去掉链接的下划线*/
            text-decoration: none;
        }
    </style>
</head>

<body>
<div id="milkPowder">
    <ul>
        <li><a href="#">美赞臣</a></li>
        <li><a href="#">惠氏</a></li>
        <li><a href="#">雅培</a></li>
        <li><a href="#">美赞臣蓝臻</a></li>
        <li><a href="#">美素</a></li>
        <li><a href="#">飞鹤</a></li>
        <li><a href="#">金领冠</a></li>
        <li><a href="#">雀巢</a></li>
        <li><a href="#">合生元</a></li>
        <li><a href="#">伊利</a></li>
        <li><a href="#">其他奶粉品牌</a></li>
    </ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>

<div id="showmore" style="text-align: center;margin:0 auto;">
    <span style="border:1px solid black;"><a href="#">显示更多奶粉品牌</a></span>
</div>
</body>
</html>
<script type="text/javascript">
    var $lis = $("ul>li:gt(5):not(:last)");//选择ul里从第六个元素节点开始到倒数第二个元素节点（即不包括最后一个元素节点）
    $lis.hide();//将选中的元素节点进行隐藏，hide()是隐藏的方法
    $("#showmore>span").click(function () {
        if ($lis.is(":hidden")) {//选中列表被隐藏了
            $lis.show(1000);
            $("#showmore>span").text("精简奶粉品牌");
        } else {//选中列表未被隐藏
            $lis.hide(1000);
            $("#showmore>span").text("显示全部奶粉品牌");
        }
    })
</script>

存在的问题：
若是去掉源码中的
<br/>
<br/>
<br/>
<br/>
<br/>
则会产生如图所示的效果：
点击前：

点击后：

分析：可能是ul的css样式问题；本人技术有限，目前还不知道什么好的解决办法，望大神给予解决办法，万分感谢

JQEUERY案例的更多相关文章

  1. 数据库优化案例——————某市中心医院HIS系统

    记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...

  2. SQL Server内存遭遇操作系统进程压榨案例

    场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...

  3. solr_架构案例【京东站内搜索】(附程序源代码)

    注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...

  4. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  5. 了不起的 nodejs-TwitterWeb 案例 bug 解决

    了不起的nodejs算是一本不错的入门书,不过书中个别案例存在bug,按照书中源码无法做出和书中相同效果,原本兴奋的心情掺杂着些许失落. 现在我们看一下第七章HTTP,一个Twitter Web客户端 ...

  6. 一个表缺失索引发的CPU资源瓶颈案例

    背景 近几日,公司的应用团队反应业务系统突然变慢了,之前是一直比较正常.后与业务部门沟通了解详情,得知最近生意比较好,同时也在做大的促销活动,使得业务数据处理的量出现较大的增长,最终系统在处理时出现瓶 ...

  7. 【Machine Learning】决策树案例：基于python的商品购买能力预测系统

    决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...

  8. Redis简单案例(二) 网站最近的访问用户

    我们有时会在网站中看到最后的访问用户.最近的活跃用户等等诸如此类的一些信息.本文就以最后的访问用户为例, 用Redis来实现这个小功能.在这之前,我们可以先简单了解一下在oracle.sqlserve ...

  9. springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)

    用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...

随机推荐

  1. JUnit4测试报错：class not found XXX

     初学java框架,最近用eclipse跟着视频坐淘淘商城这个项目,其中使用了JUnit4做单元测试.当运行测试代码时,项目报错:class not found xxx. 借助了其他大神的博客,论坛等 ...

  2. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  3. python------SocketServer (0809)

    socket(一对一) 与socketserver 一.socketserver 1. 正式定义:The socketserver module simplifies the task of writ ...

  4. zombodb 配置设置

    主要是关于es 集群地址以及分片,复制副本的配置,配置主要在postgresql.conf,当然我们可以在函数中指定 postgresql.conf 级别的配置 es 配置 格式 zdb.defaul ...

  5. Spring/Spring MVC

    90.为什么要使用 spring? 答:spring是一个开源框架,是个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架 方便结构简化开发 AOP编码的支持 声明式事物的支持 方便程序的测试 ...

  6. centos7启动过程及systemd详细说明

    开机启过程 POST->BOOT SEQUENCE-> BOOTLOADER->KERNEL + INITRAMFS(INITRD)->ROOTFS->/sbin/ini ...

  7. 【剑指offer】求一组数据中最小的K个数

    题目:输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. *知识点:Java PriorityQueue 调整新插入元素 转自h ...

  8. HTML禁止鼠标右键的代码

    禁止鼠标右键,把Demo的图片全都设为表格的背景,表格的大小与图片的大小一样.这样做看起来是一样的,主要是防止鼠标经过图片时会出现另存的按钮.禁止鼠标右键的代码很简单:<script LANGU ...

  9. android ButterKnife 点击事件没反应的解决方案

    可能只添加了 implementation 'com.jakewharton:butterknife:8.8.1'而没有添加下面这行 annotationProcessor 'com.jakewhar ...

  10. arcgis10.2 打开CAD文件注记乱码

    1.使用ARCGIS10.2打开CAD文件,图面显示的注记内容为乱码,属性表中的注记内容正常2.同样的CAD文件在ARCGIS9.3中打开正常出现此情况影响历史数据使用,请求ESRI技术支持注:系统添 ...