02_jQuery_折叠效果

作者: e20a12f8855d | 来源:发表于2019-01-02 14:57 被阅读5次

02_jQuery_折叠效果
iOS - 图片实现多层折叠效果
折叠效果
折叠效果
iCarousel用法
Expander
Android 一个可折叠的文本控件
android 折叠效果
折叠效果|动画
图片折叠效果

使用 jQuery 实现一个折叠效果。

效果图：

在线预览：jquery_fold

下载

兼容性：

兼容性

demo 图标：

fold_ico.png

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery_折叠效果</title>
</head>

<body>

<div class="fold_box">
    <div class="fold_tit">Tit 1 <span class="ico"></span></div>
    <div class="fold_con">Con 1</div>
    <div class="fold_tit">Tit 2 <span class="ico"></span></div>
    <div class="fold_con">Con 2</div>
    <div class="fold_tit">Tit 3 <span class="ico"></span></div>
    <div class="fold_con">Con 3</div>
</div>
<style>
.fold_box { width: 400px; margin: 20px auto; }
.fold_tit { position: relative; padding: 20px; border-bottom: 1px solid #dadada; background-color: #f5f5f5; }
.fold_tit .ico { position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; background-image: url(fold_ico.png); background-repeat: no-repeat; background-position: left 0; }
.fold_tit.selected { color: red; background-color: #dadada; }
.fold_tit.selected .ico { position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; background-image: url(fold_ico.png); background-repeat: no-repeat; background-position: right 0; }
.fold_con { display: none; padding: 20px; border: 1px solid #dadada; border-top: 0; }
</style>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function() {
    var showIndex = 0;
    $(".fold_tit").eq(showIndex).addClass('selected');
    $(".fold_con").eq(showIndex).show();
    $(".fold_tit").click(function(event) {
        event.preventDefault();
        $(this).toggleClass("selected").siblings('.fold_tit').removeClass("selected");
        $(this).next(".fold_con").slideToggle(400).siblings(".fold_con").slideUp(400);
    });
});
</script>

</body>

</html>