仅在扩展另一个元素时折叠一个元素 css

【问题标题】：Collapse an element when expand another element only css仅在扩展另一个元素时折叠一个元素 css
【发布时间】：2016-04-04 04:18:04
【问题描述】：

我有 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;
}
<div runat="server" id="sidebar" style="padding: 5px 0 0 5px;">
    <input class='toggle-box' id='header1' type='checkbox' /><label for='header1'>Nguyễn Văn Tư</label><div>
        <table style='text-align: left; width: 100%; vertical-align: middle;'>
            <tr>
                <td>Tên khách hàng</td>
                <td>Nguyễn Văn Tư</td>
            </tr>
            <tr>
                <td>Mã khách hàng</td>
                <td>PC06LL0191387</td>
            </tr>
            <tr>
                <td>Sery công tơ</td>
                <td>14138734</td>
            </tr>
            <tr>
                <td>Chỉ số cũ</td>
                <td>194.000</td>
            </tr>
            <tr>
                <td>Chỉ số mới</td>
                <td>196.60</td>
            </tr>
            <tr>
                <td>Sản lượng mới</td>
                <td>2</td>
            </tr>
        </table>
    </div>
    <input class='toggle-box' id='header2' type='checkbox' /><label for='header2'>ĐInh Thị Tha</label><div>
        <table style='text-align: left; width: 100%; vertical-align: middle;'>
            <tr>
                <td>Tên khách hàng</td>
                <td>ĐInh Thị Tha</td>
            </tr>
            <tr>
                <td>Mã khách hàng</td>
                <td>PC06LL0182038</td>
            </tr>
            <tr>
                <td>Sery công tơ</td>
                <td>14140069</td>
            </tr>
            <tr>
                <td>Chỉ số cũ</td>
                <td>2050.000</td>
            </tr>
            <tr>
                <td>Chỉ số mới</td>
                <td>2104.10</td>
            </tr>
            <tr>
                <td>Sản lượng mới</td>
                <td>54</td>
            </tr>
        </table>
    </div>
    <input class='toggle-box' id='header3' type='checkbox' /><label for='header3'>Nguyễn Văn Nhựt</label><div>
        <table style='text-align: left; width: 100%; vertical-align: middle;'>
            <tr>
                <td>Tên khách hàng</td>
                <td>Nguyễn Văn Nhựt</td>
            </tr>
            <tr>
                <td>Mã khách hàng</td>
                <td>PC06LL0190775</td>
            </tr>
            <tr>
                <td>Sery công tơ</td>
                <td>14138746</td>
            </tr>
            <tr>
                <td>Chỉ số cũ</td>
                <td>2699.000</td>
            </tr>
            <tr>
                <td>Chỉ số mới</td>
                <td>2785.10</td>
            </tr>
            <tr>
                <td>Sản lượng mới</td>
                <td>86</td>
            </tr>
        </table>
    </div>
    <input class='toggle-box' id='header4' type='checkbox' /><label for='header4'>Mai Văn Lý</label><div>
        <table style='text-align: left; width: 100%; vertical-align: middle;'>
            <tr>
                <td>Tên khách hàng</td>
                <td>Mai Văn Lý</td>
            </tr>
            <tr>
                <td>Mã khách hàng</td>
                <td>PC06LL0182035</td>
            </tr>
            <tr>
                <td>Sery công tơ</td>
                <td>14138744</td>
            </tr>
            <tr>
                <td>Chỉ số cũ</td>
                <td>2581.000</td>
            </tr>
            <tr>
                <td>Chỉ số mới</td>
                <td>2631.70</td>
            </tr>
            <tr>
                <td>Sản lượng mới</td>
                <td>50</td>
            </tr>
        </table>
    </div>
</div>

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

【问题讨论】：

  • 这个带有内联 css 和不可读 html 的 jsfiddle 不好。请提供一个能够重现您的问题并且可读的 jsfiddle。我个人会使用这样的东西：webdesignerhut.com/create-pure-css-tabs.
  • 你能告诉我你是怎么打开那个div的吗？
  • @HarshSanghani : 那个 div 是一个侧边栏，并固定在 body 的左侧。
  • 您可以将输入作为单选按钮而不是复选框。
  • 我看到了答案。非常感谢。

标签： html css jsfiddle collapse expand


【解决方案1】：

诀窍很简单。只需将输入从checkbox 替换为radio 并在所有inputs 中添加具有相同值的属性name。

这一变化意味着只有一个输入可以同时为checked。所以，如果你点击一个项目，其余的都将被关闭。

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;
}

[type="reset"] {
  border: 0;
  width: 100%;
  text-align: inherit;
  padding: 0;
  font: inherit;
  margin: 0;
  outline:0 !important;
}

.toggle-box + label,
[type="reset"]{
  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 + button {
  display:none;
}

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

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

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

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

.toggle-box + label:before,
[type="reset"]: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;
}
<form>
  <div runat="server" id="sidebar" style="padding: 5px 0 0 5px;">
    <input class='toggle-box' id='header1' type="radio" name="radio" /><label for='header1'>Nguyễn Văn Tư</label>
    <button type="reset">Nguyễn Văn Tư</button>
    <div>
      <table style='text-align: left; width: 100%; vertical-align: middle;'>
        <tr>
          <td>Tên khách hàng</td>
          <td>Nguyễn Văn Tư</td>
        </tr>
        <tr>
          <td>Mã khách hàng</td>
          <td>PC06LL0191387</td>
        </tr>
        <tr>
          <td>Sery công tơ</td>
          <td>14138734</td>
        </tr>
        <tr>
          <td>Chỉ số cũ</td>
          <td>194.000</td>
        </tr>
        <tr>
          <td>Chỉ số mới</td>
          <td>196.60</td>
        </tr>
        <tr>
          <td>Sản lượng mới</td>
          <td>2</td>
        </tr>
      </table>
    </div>
    <input class='toggle-box' id='header2' type='radio' name="radio" /><label for='header2'>ĐInh Thị Tha</label>
    <button type="reset">ĐInh Thị Tha</button>
    <div>
      <table style='text-align: left; width: 100%; vertical-align: middle;'>
        <tr>
          <td>Tên khách hàng</td>
          <td>ĐInh Thị Tha</td>
        </tr>
        <tr>
          <td>Mã khách hàng</td>
          <td>PC06LL0182038</td>
        </tr>
        <tr>
          <td>Sery công tơ</td>
          <td>14140069</td>
        </tr>
        <tr>
          <td>Chỉ số cũ</td>
          <td>2050.000</td>
        </tr>
        <tr>
          <td>Chỉ số mới</td>
          <td>2104.10</td>
        </tr>
        <tr>
          <td>Sản lượng mới</td>
          <td>54</td>
        </tr>
      </table>
    </div>
    <input class='toggle-box' id='header3' type='radio' name="radio" /><label for='header3'>Nguyễn Văn Nhựt</label>
    <button type="reset">Nguyễn Văn Nhựt</button>
    <div>
      <table style='text-align: left; width: 100%; vertical-align: middle;'>
        <tr>
          <td>Tên khách hàng</td>
          <td>Nguyễn Văn Nhựt</td>
        </tr>
        <tr>
          <td>Mã khách hàng</td>
          <td>PC06LL0190775</td>
        </tr>
        <tr>
          <td>Sery công tơ</td>
          <td>14138746</td>
        </tr>
        <tr>
          <td>Chỉ số cũ</td>
          <td>2699.000</td>
        </tr>
        <tr>
          <td>Chỉ số mới</td>
          <td>2785.10</td>
        </tr>
        <tr>
          <td>Sản lượng mới</td>
          <td>86</td>
        </tr>
      </table>
    </div>
    <input class='toggle-box' id='header4' type='radio' name="radio" /><label for='header4'>Mai Văn Lý</label>
    <button type="reset">Mai Văn Lý</button>
    <div>
      <table style='text-align: left; width: 100%; vertical-align: middle;'>
        <tr>
          <td>Tên khách hàng</td>
          <td>Mai Văn Lý</td>
        </tr>
        <tr>
          <td>Mã khách hàng</td>
          <td>PC06LL0182035</td>
        </tr>
        <tr>
          <td>Sery công tơ</td>
          <td>14138744</td>
        </tr>
        <tr>
          <td>Chỉ số cũ</td>
          <td>2581.000</td>
        </tr>
        <tr>
          <td>Chỉ số mới</td>
          <td>2631.70</td>
        </tr>
        <tr>
          <td>Sản lượng mới</td>
          <td>50</td>
        </tr>
      </table>
    </div>
  </div>
</form>

http://jsbin.com/pefobi

注意：如果您需要第二次点击再次关闭标签页，您必须用form标签包装所有内容。

【讨论】：

  • 你救了我。非常感谢！
  • 不错的解决方案，但有一个问题。你不能用同样的点击折叠。
  • @ketan 虽然 Đồng Vọng 没有要求你接受你的挑战；）我更新了我的答案。
  • @MoshFeu 不错。 :)
  • 我在 ^_^ 之前没有看到这个问题。现在我想我对这个解决方案很满意。谢谢你 Mosh Feu ;)
猜你喜欢
  • 1970-01-01
  • 2015-10-13
  • 2021-01-18
  • 1970-01-01
  • 1970-01-01
  • 2023-03-22
  • 2022-01-16
  • 2013-10-10
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode