首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 前端 > 正文

展开另一个元素时仅折叠元素css

作者：殉情放开那只小兔子 | 2023-09-08 19:34
如何解决《展开另一个元素时仅折叠元素css》经验，为你挑选了0个好方法。

我有asp.net网站.由于某种原因,我不能在我的代码中使用javascript.我使用此代码创建一个可扩展的表: 

html, body, form {
  margin: 0 auto;
  padding: 0;
  text-align: left;
  height: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

tr:nth-child(even) {
  background: #F5F5F5;
}

tr:nth-child(odd) {
  background: #DCDCDC;
}

tr:hover
{
  background-color: #D3D3D3;
}
.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 25px;
  margin-bottom: 2px;
  margin-left: 5px;
  background-color: #F1F8FF;
  border-bottom: 1px solid gray;
}

.toggle-box + label:hover {
  background-color: #C5ECFF;
}

.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
  margin-left: 20px;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
  background-color: #66AEFF;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
  margin-right: 5px;
  text-align: center;
  width: 25px;
}

.toggle-box:checked + label:before {
  content: "\2212";
}
#matru {
  border: 0;
  text-align: left;
  position: absolute;
  top: 100px;
  left: 300px;
}

完整代码在这里:https://jsfiddle.net/pdhung197/3eomjp3m/
但我想要更多:当我点击折叠元素时,该元素将被展开,其他元素将被折叠.
这个项目只能使用CSS,没有JavaScript,所以我没有办法解决这个问题.

推荐阅读
devbox
殉情放开那只小兔子
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有