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

2017-2-25 17:59 来自本站原创 28,670 12 22
[摘要]

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

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

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

看这个例子:

这里是要折叠的内容。

.

.

再次点击收起内容...

展开

点击上面的按钮,看看效果!

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

代码部分:

html部分

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

js部分

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

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

css部分

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

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

延伸:slideToggle()

slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。

如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

语法:

$(selector).slideToggle(speed,callback)

其中speed规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。

可能的值:毫秒 (比如 1500)、"slow"、"normal"、"fast"

本文最后更新于2017年2月25日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

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

支付宝扫一扫赞助微信扫一扫赞助

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

      没能默认先显示一些内容吗?

    2. wuke 1
      6年前 (2017-11-01) 0楼

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

      • Wing
        6年前 (2017-11-02)  地下1层

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

    3. 7年前 (2017-02-28) 0楼

      这个逻辑思维要够清晰

    4. 7年前 (2017-02-28) 0楼

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

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

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

    5. 7年前 (2017-02-27) 0楼

      值得学习的技巧

    6. 7年前 (2017-02-27) 0楼

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

    7. 7年前 (2017-02-26) 0楼

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

    8. 7年前 (2017-02-25) 0楼

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

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

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

    发表评论

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

    分享 12 22 28,670
    Top