切换到窄版

 找回密码
 立即注册
搜索
Stage1st»论坛 › 主论坛 › ＰＣ数码 › 问个做网页的问题
返回列表 发新帖
查看: 1085|回复: 6

[软件] 问个做网页的问题

[复制链接]
皇帝雅西加
头像被屏蔽
发表于 2019-4-16 08:50 来自手机 | 显示全部楼层 |阅读模式
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

matthewsteel
     
发表于 2019-4-16 09:58 | 显示全部楼层
https://ant.design/components/collapse-cn/

做一个好的搬运工
回复

使用道具 举报

aithinkso
     
发表于 2019-4-16 10:46 来自手机 | 显示全部楼层
没框架吧，onclick 把内容插进去就行了

—— 来自 Xiaomi MI MAX, Android 7.0上的 S1Next-鹅版 v2.1.2
回复

使用道具 举报

モナド
     
发表于 2019-4-16 10:47 | 显示全部楼层
jQuery的slideDown()方法
回复

使用道具 举报

跃渊
     
发表于 2019-4-18 22:46 | 显示全部楼层
不嫌丑有原生的detail标签

http://www.w3school.com.cn/tiy/t.asp?f=html5_details
回复

使用道具 举报

startdl
     
发表于 2019-4-19 00:07 | 显示全部楼层
用框架的话关键字collapse组件
自己写的话

  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">

  7. <!--css样式-->
  8. <style>
  9.     .collapse {
  10.       height: 20px;
  11.       overflow: hidden;
  12.     }
  13. </style>
  14. <!--引用jquery库-->
  15. <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  16. </head>

  18. <body>

  20. <div>
  21.   <h3>
  22.     标题
  23.     <a class="js-btn-toggle" href="javascript:;">显示全部</a>
  24.   </h3>
  25.   <ul class="collapse">
  26.     <li>列表内容</li>
  27.     <li>列表内容</li>
  28.     <li>列表内容</li>
  29.     <li>列表内容</li>
  30.     <li>列表内容</li>
  31.     <li>列表内容</li>
  32.     <li>列表内容</li>
  33.     <li>列表内容</li>
  34.   </ul>
  35. </div>

  37. <script type="text/javascript">
  38.     let $btn = $('.js-btn-toggle'),
  39.        $collapse = $('.collapse');
  40.    
  41.     $btn.on('click', function(){
  42.       $collapse.toggleClass('collapse')
  43.     });
  44. </script>

  46. </body>
  47. </html>
复制代码
回复

使用道具 举报

startdl
     
发表于 2019-4-19 00:09 | 显示全部楼层
本帖最后由 startdl 于 2019-4-19 00:10 编辑

简单点的思路是 先限制这个东西的高度，点击按钮的时候高度100%和限制之间切换还可以加个transition做个过渡动画效果
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|上海互联网违法和不良信息举报中心|网上有害信息举报专区|962110 反电信诈骗|举报电话 021-62035905|Stage1st ( 沪ICP备13020230号-1|沪公网安备 31010702007642号 )

GMT+8, 2024-11-16 15:59 , Processed in 0.027520 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表