Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

结合H5 details summary做一个折叠展开效果 #8

Open
Luotianyi1205 opened this issue Jan 16, 2018 · 0 comments
Open

结合H5 details summary做一个折叠展开效果 #8

Luotianyi1205 opened this issue Jan 16, 2018 · 0 comments

Comments

@Luotianyi1205
Copy link
Owner

Luotianyi1205 commented Jan 16, 2018 •
edited
Loading

前言

在通常我们做点击折叠再点击显示通常需要JS的辅助，那么现在H5的新标签

detaiks summary

标签出现了，我们可以放弃用JS做这个交互效果了

list 1 介绍

标签使用很简单，只需要在body中写入就可以啦如下面代码

<details>
 <summary>我是摘要1<summary>
<p>我是段落</p>
</details>

出现的效果类似于下面

1516092992 1

具体的变现是
1 .在默认的情况下 summary下面的内容是隐藏的

2.出现了一个小三角。

我们点击效果如下图所示

image

展开显示是通过open属性来控制的

details标签上添加布尔类型的open，可以让我们的详情信息默认就是展开状态，如下HTML示意：

<details open>
<summary>我默认是展开的<summary>
<p>我是不是被展开了</p>
</deteils>

image

如果summary缺省


<details>
<p>你看我标题是啥</p>
</details>

截图如下所示：

image

我们发现在不设置summary情况下，默认显示是 "详细信息"

list 2 details 内置UI浏览器样式可以更改

用过此属性的可以发现在谷歌浏览器和火狐浏览器三角的样式很丑，我们可以通过 ::-webkit-details-marker和-moz-list-bullit-分别给谷歌浏览器和火狐设置三角的样式，列如我们把在谷歌浏览器下的箭头样式修改下，代码如下

HTML:
<details>
   <summary>
     我是标题
   </summary>
    
<p>你看我上边标题是啥</p>
</details>

CSS

summary{
 user-select:none:
outline:none
 }
details ::-webkit-details-marker {
    direction: ltr;
    color: gray;
    margin-left: .5ch;
}

default
我们发现小箭头变成了灰色

做一些简单的特效

展开项显示的时候是非常生硬的突然显示，实际上我们可以借助一些选择器技巧以及CSS3 transition属性让菜单展开收起的时候是有动画效果的，效果如下gif截图：
slide-toggle

此效果实现原理核心是[open]属性选择器，和加号+相邻兄弟选择器，dl定义列表就是展开收起的内容，其作为兄弟元素和details元素平起平坐，于是，我们就可以利用点击summary元素details元素的open属性会变化的特性实现我们想要的动画效果


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   summary {
    user-select: none;
    outline: 0;
}
details ::-webkit-details-marker {
    
    color: gray;
  
    display: none;
}
details summary::after{
  content: "";
   position: absolute;
   width: 1em;
    height: 1em;
    margin:.2rem 0 0.5ch;
     background: url(svg.svg) no-repeat ;
     background-size: 100% 100%;
    transition: transform .2s;
}
[open] summary::after{
   transform:rotate(90deg) ;

}
[open] summary,
summary:hover {
    background-color: #fff;
    box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;
     max-height: 100px;
}
.box a{
   display:block;
   text-decoration: none;
    color: currentcolor
}
.box a:hover {
    background-color: #f0f0f0;
}
.box {
      position: absolute;
    /* border: 1px solid #ddd; */
    background-color: #fff;
    min-width: 100px;
    /* padding: 5px 0; */
    /* margin-top: -1px; */
    max-height: 0;
    /* margin: 0 0 1rem; */
    overflow: hidden;
}
details + dl {
    max-height: 0;
    transition: all .25s;
    margin: 0 0 1rem;
    overflow: hidden;
}
[open] + dl{
  max-height: 100px;
}

  </style>

</head>
<body>
<div class="bar">
   <details>
   <summary>我的消息</summary>
   </details>
   <dl>
    <dd><a href>我的订单</a></dd>
    <dd><a href>我的活动</a></dd>
    <dd><a href>评价晒单</a></dd>
    <dd><a href>购物助手</a></dd>
</dl>
</div>
 </body>
</html>

好 就到这里^_^
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Luotianyi1205