JQuery实现内容折叠面板demo

最新推荐文章于 2023-04-08 08:17:18 发布

picacho_pkq

最新推荐文章于 2023-04-08 08:17:18 发布

阅读量666

点赞数 2

分类专栏：前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/pikcacho_pkq/article/details/126086491

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery创建一个可交互的折叠面板，通过click事件控制内容的显示与隐藏，并演示了如何利用data方法跟踪状态。通过实例学习了CSS cursor和list-style属性的应用。

摘要由CSDN通过智能技术生成

折叠面板在前端页面十分常见，本课程将会带领初学者逐步完成一个 jQuery 内容折叠面板，并且使用 jQuery 的方法来实现简单的动画。

1. 页面布局

这里主要探讨折叠面板的实现，那么主体的样式就随便一点吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>折叠面板</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul > li {
        cursor: pointer;
        list-style: none;
        padding: 30px;
        background: #ccc;
        border-bottom: 1px solid #fff;
      }
      h1 {
        margin-bottom: 5px;
      }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  </head>
  <body>
    <ul>
      <li>
        <h1>jQuery</h1>
        <p>
          jQuery is a fast, small, and feature-rich JavaScript library. It makes
          things like HTML document traversal and manipulation, event handling,
          animation, and Ajax much simpler with an easy-to-use API that works
          across a multitude of browsers. With a combination of versatility and
          extensibility, jQuery has changed the way that millions of people
          write JavaScript.
        </p>
      </li>
      <li>
        <h1>PHP</h1>
        <p>
          PHP is a popular general-purpose scripting language that is especially
          suited to web development.Fast, flexible and pragmatic, PHP powers
          everything from your blog to the most popular websites in the world.
        </p>
      </li>
    </ul>
  </body>
</html>

在这里插入图片描述
cursor属性
cursor 属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。常用的属性值有：

1.default：默认光标，通常是一个箭头。
2. auto：默认，浏览器设置的光标。
3.crosshair：光标表示十字线。
4.pointer：光标表示指示链接的指针（一只手）。
5.move：光标表示对象可被移动。

list-style属性
list-style 简写属性在一个声明中设置所有的列表属性。可以设置的属性（按顺序）： list-style-type，list-style-position，list-style-image，未设置的属性会使用其默认值。

1.list-style-type 属性设置列表项标记的类型。
2.list-style-position 属性指示如何相对于对象的内容绘制列表项标记。
3.list-style-image 属性使用图像来替换列表项的标记。

2.实现内容折叠面板

设计思路：根据点击次数来判断显示还是隐藏。
第一步：用 data() 方法保证每个元素点击的次数

  $('h1').data({ n: 0 });

jQuery 的 data() 方法允许我们在 DOM 元素上绑定任意类型的数据，避免了循环引用的内存泄漏风险。$(“h1”).data({ n: 0 }) 为 h1 元素都绑定了一个初始对象，并且设置了变量名为 n，值为 0。

h1 元素下绑定了对象类型的数据，也就是我们指定的 {n:0}。那么就可以通过这个数据进行操作，从而判断是否进行点击。

第二步：使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

语法：
$(selector).hide(speed, callback);
$(selector).show(speed, callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：slow、fast 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

// 开始隐藏内容
$("h1").next().hide();

$('h1').click(function () {
    n = $(this).data('n');
    if (n % 2 == 0) {
      // next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
      $(this).next().hide(500);
    } else {
      $(this).next().show(500);
    }

    $(this).data({ n: n + 1 });
  });