JQuery实现全部/部分显示

最新推荐文章于 2023-02-06 21:06:26 发布

C币贫困户

最新推荐文章于 2023-02-06 21:06:26 发布

阅读量1.2k

点赞数

分类专栏： # Javaweb 文章标签： java sql 数据库

本文链接：https://blog.csdn.net/weixin_48747169/article/details/123765931

版权

Javaweb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li:gt(4):not(:last)").hide();
            $("#btn").click(function (){
                $("li:gt(4):not(:last)").toggle();
                if($("li:gt(4):not(:last)").is(":hidden")){
                    $("#btn").text("显示全部选项");
                }else {
                    $("#btn").text("显示部分选项");
                }
            })
        })
    </script>
</head>
<body>
<ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
    <li>选项6</li>
    <li>选项7</li>
    <li>选项8</li>
    <li>选项99</li>
</ul>
<button id="btn">显示全部选项</button>
</body>
</html>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

C币贫困户

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现全部/部分显示

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><!DOCTYPE html><html><head> <title>Title</title> <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script> &lt
复制链接

扫一扫