展开收缩功能 CSS html CSS

效果图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /...
摘要由CSDN通过智能技术生成

效果图

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      * {

        box-sizing: border-box;

        margin: 0;

        padding: 0;

      }

      ul,

      ol,

      li {

        list-style: none;

      }

      .flex {

        display: flex;

      }

      .flex.-column {

        flex-direction: column;

      }

      .flex.x-center {

        justify-content: center;

      }

      .flex.y-center {

        align-items: center;

      }

      .flex.xy-center {

        justify-content: center;

        align-items: center;

      }

      .h-full {

        height: 100%;

      }

      .w-full {

        width: 100%;

      }

      .full {

        width: 100%;

        height: 100%;

      }

      .title {

        margin: 0 auto;

        text-align: center;

      }

      header {

        margin: 16px 0;

      }

      .page {

        width: 80%;

        margin: 0 auto;

      }

      .answer {

        overflow: hidden;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用jQuery的`slideToggle()`方法来实现同一页面多个DIV层的展开收缩功能。具体步骤如下: 1. 给需要展开收缩的DIV层添加一个class类,比如"expandable"。 2. 在jQuery中使用`$(".expandable")`来选择所有的需要展开收缩的DIV层。 3. 使用`click()`方法来监听DIV层的点击事件。 4. 在点击事件中使用`slideToggle()`方法来展开收缩DIV层。 示例代码如下: ```html <!DOCTYPE html> <html> <head> <title>HTML多层展开,jQuery实现同一页面多个DIV层展开收缩功能</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> .expandable { background-color: #f0f0f0; padding: 10px; margin-bottom: 10px; cursor: pointer; } .expandable-content { display: none; } </style> </head> <body> <div class="expandable"> <h3>第一层</h3> <div class="expandable-content"> <p>第一层内容</p> </div> </div> <div class="expandable"> <h3>第二层</h3> <div class="expandable-content"> <p>第二层内容</p> </div> </div> <div class="expandable"> <h3>第三层</h3> <div class="expandable-content"> <p>第三层内容</p> </div> </div> <script type="text/javascript"> $(document).ready(function() { $(".expandable").click(function() { $(this).find(".expandable-content").slideToggle(); }); }); </script> </body> </html> ``` 在上述代码中,我们使用了一个`.expandable`的class来选择需要展开收缩的DIV层,并且在点击事件中使用了`slideToggle()`方法来展开收缩DIV层。同时,我们也添加了一些CSS样式来美化界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值