vue和react等项目中更简单的实现展开收起更多等效果示例

}
.box {
position: absolute;
border: 1px solid #ddd;
background-color: #fff;
min-width: 100px;
padding: 5px 0;
margin-top: -1px;
}
.box a {
display: block;
padding: 5px 10px;
color: inherit;
}
.box a:hover {
background-color: #f0f0f0;
}
.box sup {
position: absolute;
color: #cd0000;
font-size: 12px;
margin-top: -.25em;
}

HTML代码：

<div class="bar">
  <details>
    <summary>我的消息</summary>
    <div class="box">
      <a href>我的回答<sup>12</sup></a>
      <a href>我的私信</a>
      <a href>未评价订单<sup>2</sup></a>
      <a href>我的关注</a>
    </div>
  </details>
</div>
<p>这里放一段文字表明上面的是悬浮效果。</p>

3、树形菜单效果

CSS代码：

/* 隐藏默认三角 */
::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
details {
  padding-left: 20px;
}
summary::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid #999;
  background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;
  background-size: 2px 10px, 10px 2px;
  vertical-align: -2px;
  margin-right: 6px;
  margin-left: -20px;
}
[open] > summary::before {
  background: linear-gradient(to right, #999, #999) no-repeat center;
  background-size: 10px 2px;
}

HTML代码：

<details>
  <summary>我的视频</summary>
  <details>
    <summary>爆肝工程师的异世界狂想曲</summary>
    <div>tv1-720p.mp4</div>
    <div>tv2-720p.mp4</div>
    ...
    <div>tv10-720p.mp4</div>
  </details>
  <details>
    <summary>七大罪</summary>
    <div>七大罪B站00合集.mp4</div>
  </details>
  <div>珍藏动漫网盘地址.txt</div>
  <div>我们的小美好.mp4</div>
</details>