PROMULGATOR

    DFFZMXJ

    北京市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<box>
    <profile>
        <img class="avatar" title="学神之女" alt="学神之女的头像" src="http://www.jq22.com/img/cs/500x500-1.png">
        <info>
            <username title="名字">系统消息</username>
            <bio title="性别、年龄、个签等个人信息">其它 72岁 默认的机器人账号。</bio>
        </info>
    </profile>
    <content>
        <h1>你好！</h1>
        <p>
            此处内容仅供测试。你不值得阅读此处内容。请不要浪费时间，将时间用在有意义的事情上。
        </p>
        <p>
            此处文本同样没有阅读价值。
        </p>
        <img title="jQ22" alt="jQ22" src="http://www.jq22.com/img/cs/500x300-1.png">
    </content>
</box>
<warning>放大屏幕以预览效果(500x500以上)</warning>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
body *::-webkit-scrollbar {
    background:transparent;
    width:5px;
    height:5px;
}
@media (min-width:1024px) {
    body *::-webkit-scrollbar {
    width:8px;
    height:8px;
}
}body *::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,0.2);
}
body {
    width:100%;
    height:100%;
    overflow:hidden;
    background:#303030;
    font-family:Roboto,Noto,sans-serif,arial,"Microsoft Yahei";
}
box {
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    width:500px;
    height:500px;
    background:#fafafa;
    transform:translate(-50%,-50%);
    border-radius:3px;
    padding:0;
    box-shadow:0px 0px 10px black;
    transition:height 0.3s ease;
}
box profile {
    height:80px;
    display:block;
    width:100%;
    background:#f1f1f1;
    border-bottom:1px solid rgba(0,0,0,.12);
    cursor:hand;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
(function panelInit() {
    $("profile").click(function() {
        $(this).parent().toggleClass("hide");
    });
})();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

CSS3折叠内容卡片

按下profile元素（资料部分）即可折叠或展开卡片。

如果要做成列表，可以在添加如下代码后实现：

box {
    position: static;left: none;top: none;transform: translate(50 % , 50 % );
}

如果要默认折叠，可以在box元素上添加.hide类实现。

如果动态加入了卡片，请使用 panelinit() 函数重新初始化。

如果要自定义卡片展开后的高度，请同时修改父元素(box)和子元素(box content)的高度或用calc()方法使子元素可自动设定高度。

在实际使用中，请去除warning元素和相关css代码。

1
      DFFZMXJ评论奖励 1 jQ币
      2018/7/31 9:47:42

      因为没考虑到预览界面的尺寸，所以预览不了。
      预览的话请先给css代码做如下修改：

      /*删除部分*/ /*当屏幕尺寸过小时提示*/
 box {
	display:none;
}
warning {
	height:100vh;
	width:100vw;
	line-height:100vh;
	position:fixed;
	background:lightcoral;
	text-align:center;
}
@media screen and (min-height:500px) {
	@media screen and (min-width:500px) {
	box {
	display:block;
}
warning {
	display:none;
}
}/*加入部分*/ box {
	display:block;
}
warning {
	display:none;
}
      回复