小巧实用的点击折叠展开内容jQuery特效

2017-2-25 17:59 来自本站原创 11,274 11 12
[摘要]

有时候网页上大段内容可能会影响到排版,我们可以通过折叠功能,让有需求的网友自行选择是略过还是展开,本文提供一段简单实用的jQuery特效。

最近在学习js的过程中越来越感受到jQuery的魅力,这个著名的js框架极大的简化了JavaScript编程,本来需要用复杂原生js代码实现的效果可以用jQuery轻松实现,今天分享一小段经典的点击折叠展开内容特效。\r\n\r\n\r\n

看这个例子:

\r\n

\r\n\r\n这里是要折叠的内容。\r\n\r\n.\r\n\r\n.\r\n\r\n再次点击收起内容...\r\n\r\n

\r\n

展开

\r\n点击上面的按钮,看看效果!\r\n\r\n对,就是这么小巧实用,使用情景:在写博客的时候,里面分享一段特别长的代码,影响了排版,我们可以通过此功能进行折叠,有需要的读者点开进行查阅,比较人性化。当然不限于此,技术是死的,思路是活的。\r\n

代码部分:

\r\nhtml部分\r\n

<div class="fold-box">\r\n <p>这里是要折叠的内容。</p>\r\n <p>再次点击收起内容...</p>\r\n </div>\r\n <div class="fold-button">\r\n <span class="open">展开</span>\r\n <span class="close" style="display:none;">收起</span>\r\n </div>

\r\njs部分\r\n

$(function(){\r\n $(".fold-button").click(function(){\r\n $(".fold-box").slideToggle("slow");\r\n $(".open").toggle();\r\n $(".close").toggle();\r\n });\r\n });

\r\n记得这是jQuery特效,要在页面<head>里引入jQuery库文件,不赘述。\r\n\r\ncss部分\r\n

.fold-box{\r\n padding:10px;\r\n background:#e5eecc;\r\n border:solid 1px #c3c3c3;\r\n display:none;\r\n margin: 10px;\r\n }\r\n .fold-button{\r\n text-align: center;\r\n margin:0px;\r\n padding:5px;\r\n }\r\n .fold-button span{\r\n display: inline-block;\r\n padding: 5px 15px;\r\n background-color: #32a5e7;\r\n color: #fff;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n }

\r\n这是笔者自用的,如果你有更好的方案,可以留言分享。\r\n

延伸:slideToggle()

\r\nslideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。\r\n\r\n如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。\r\n\r\n语法:\r\n

$(selector).slideToggle(speed,callback)

\r\n其中speed规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。\r\n\r\n可能的值:毫秒 (比如 1500)、"slow"、"normal"、"fast"

瓜分支付宝10亿红包

如果认为本文对您有所帮助请赞助本站

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属雅兮网所有,欢迎转载,但务请注明出处;
    目前评论:11   其中:访客  7   博主  4
    加载中...
    1. wuke 1
      4个月前 (11-01) 7楼

      一般情况下展开 这种效果视觉上都是向下撑开的感觉,有没有办法实现 视觉上是“向上”撑开的效果呢

      • 4个月前 (11-02)  地下1层

        @wuke: 因为从上向下展开是符合用户阅读习惯的,如果从下向上撑开,上面的内容被顶上去,不太符合阅读习惯

    2. 1年前 (2017-02-28) 6楼

      这个逻辑思维要够清晰

    3. 1年前 (2017-02-28) 5楼

      还不错,不是很长的文章不用添加翻页,用折叠隐藏式不错的选择,你的代码可以再简化一下,用jq来添加移除class的话比较好

      • 1年前 (2017-02-28)  地下1层

        @何先生: 个人感觉代码不冗余呀,fold-button选择器绑定click事件,.fold-box选择器用slideToggle()效果来滑动显示或隐藏;同时下面两个按钮“展开”“收起”用toggle()效果切换显隐,默认收起display:none;总体效果:内容隐藏、收起按钮隐藏,展开按钮显示,点击按钮触发内容的slideToggle()效果和按钮的toggle()效果,内容滑动打开,展开按钮隐藏,收起按钮显示。

    4. 1年前 (2017-02-27) 4楼

      值得学习的技巧

    5. 1年前 (2017-02-27) 板凳

      强大的jquery,有右上角弹出菜单的特效没?,手机端的

    6. 1年前 (2017-02-26) 椅子

      [呲牙] 这个功能确实很给力,所以我很早就从乐趣公园分享的那个GIT主题中拿过来用了。

    7. 1年前 (2017-02-25) 沙发

      确实,这个真心很喜欢的,特别是文章内插入代码、知识等内容的时候运用“展开”可以有效的解决文章过长的问题!总之,这是个很高大上的功能!目前很多主题内的短代码都支持的!

      • 1年前 (2017-02-27)  地下1层

        @明月登楼: 是啊,是个比较人性化的东西,集成短代码在编辑器,还是蛮方便的。

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    11 12 11,274
    Top