纯CSS手风琴在CSS标签中不起作用

Question

我有一个纯CSS手风琴使用复选框输入+标签技巧。源代码可在此处找到：

手风琴：https://codepen.io/raubaca/pen/PZzpVe
标签：https://css-tricks.com/css3-tabs/

手风琴在标签之外工作。挑战在于使手风琴在标签内工作，但它们并没有扩展和收缩。我调整了位置，z指数，身高等等但是没有成功。

如何让手风琴在标签内工作？

https://jsfiddle.net/Lance_Bitner/z5odxw88/

.tab > input:checked ~ .tab-content {
 max-height: 100%;
 }

.tab > label::after {
 position: absolute;
 left: -20px;
 top: -9px;
 display: block;
 width: 3em;
 height: 3em;
 line-height: 3em;
 text-align: center;
 -webkit-transition: all .35s;
 -o-transition: all .35s;
 transition: all .35s;
 }

.tab > input[type=checkbox] + label::after {
 content: " + ";
 font-size: 18px;
 font-weight: 900;
 }

.tab > input[type=radio] + label::after {
 content: " \25BC ";
 }

.tab > input[type=checkbox]:checked + label::after {
 transform: rotate(315deg);
 }

.tab > input[type=radio]:checked + label::after {
 transform: rotateX(180deg);
 }

Answer 1

试用此代码

在css code.change z-index:-1下面更新为z-index:1

.w3c > div:target > div {
    position: absolute;
    z-index: 1;
}

DEMO

Answer 2

对第二组复选框使用不同的id，并在z-index:0

中添加.w3c

＆＃13;

＆＃13;

/* Acordeon styles */

.tab1 {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #0072c6;
  overflow: hidden;
}

.tab1 p {
  color: black;
}

.tab > input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tab > label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  /*background-color:aliceblue;
  font-weight: bold;*/
  line-height: 3;
  cursor: pointer;
}

.blue label {
  background: #2980b9;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  background: white;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

.blue .tab-content {
  background: #3498db;
}

.tab-content p {
  margin: 1em;
}

.tab > input:checked ~ .tab-content {
  max-height: 100%;
}

.tab > label::after {
  position: absolute;
  left: -20px;
  top: -9px;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3em;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.tab > input[type=checkbox] + label::after {
  content: " + ";
  font-size: 18px;
  font-weight: 900;
}

.tab > input[type=radio] + label::after {
  content: " \25BC ";
}

.tab > input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}

.tab > input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

.row {
  background-color: white;
}

.ms-srch-sb {
  min-width: 150px !important;
}

.page-wrap {
  width: 80%;
  margin: 0 auto;
}

input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tab-wrap {
  width: 100%;
  float: none;
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.tab-wrap li {
  float: left;
  display: block;
}

.tab-wrap label {
  position: relative;
  display: inline-block;
  padding: 1.5em 1.5em 1em;
  color: inherit;
  text-decoration: none;
  margin: 0 10px 0 0px;
}

.label-1 {
  z-index: 100;
}

.label-2 {
  z-index: 90;
}

.label-3 {
  z-index: 80;
}

.tab-wrap label:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: -1;
  border: .1em solid #aaa;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(229, 229, 229, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  -webkit-transform: perspective(5px) rotateX(2deg);
  transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}

.tab-wrap .tab-content {
  z-index: 200;
  display: none;
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 53px;
  left: 0;
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  border: .1em solid #aaa;
  border-top: 0;
}

.tab-wrap [id^="tab"]:checked + label {
  z-index: 200;
  margin-bottom: -1px;
  border-top-width: 1px;
}

.tab-wrap [id^="tab"]:checked + label:before {
  background: #fff;
}

.tab-wrap [id^="tab"]:checked ~ .tab-content {
  display: block;
}


/* Stuff for example six */

.w3c {
  min-height: 250px;
  position: relative;
  width: 100%;
  z-index:0
}

.w3c > div {
  display: inline;
}

.w3c > div > a {
  margin-left: -1px;
  position: relative;
  left: 1px;
  text-decoration: none;
  color: black;
  background: white;
  display: block;
  float: left;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-bottom: 1px solid white;
}

.w3c > div:not(:target) > a {
  border-bottom: 0;
  background: -moz-linear-gradient(top, white, #eee);
}

.w3c > div:target > a {
  background: white;
}

.w3c > div > div {
  background: white;
  z-index: -2;
  left: 0;
  top: 30px;
  bottom: 0;
  right: 0;
  padding: 20px;
  border: 1px solid #ccc;
}

.w3c > div:not(:target) > div {
  position: absolute
}

.w3c > div:target > div {
  position: absolute;
  z-index: -1;
}

＆＃13;

<div>
  <div class="tab">
    <input id="tab-one" type="checkbox" name="tabs">
    <label for="tab-one">Introduction to SharePoint</label>
    <div class="tab-content">
      <p>
        <div class="column2">
          <a href=""><img src="../images/classroom1.png"></a>
          <a href=""><img src="../images/document1.png"></a>
          <a href=""><img src="../images/presentation1.png"></a>
          <a href=""><img src="../images/video1.png"></a>
        </div>
      </p>
    </div>
  </div>
  <div class="tab">
    <input id="tab-two" type="checkbox" name="tabs">
    <label for="tab-two">Label Two</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab">
    <input id="tab-three" type="checkbox" name="tabs">
    <label for="tab-three">Label Three</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
</div>
</div>

<div class="w3c">
  <div id="tab16">
    <a href="#tab16">Tab 16</a>
    <div>
      <div class="tab">
        <input id="tab-one1" type="checkbox" name="tabs">
        <label for="tab-one1">Introduction to SharePoint</label>
        <div class="tab-content">
          <p>
            <div class="column2">
              <a href=""><img src="../images/classroom1.png"></a>
              <a href=""><img src="../images/document1.png"></a>
              <a href=""><img src="../images/presentation1.png"></a>
              <a href=""><img src="../images/video1.png"></a>
            </div>
          </p>
        </div>
      </div>
      <div class="tab">
        <input id="tab-two2" type="checkbox" name="tabs">
        <label for="tab-two2">Label Two</label>
        <div class="tab-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
      </div>
      <div class="tab">
        <input id="tab-three3" type="checkbox" name="tabs">
        <label for="tab-three3">Label Three</label>
        <div class="tab-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="tab17">
    <a href="#tab17">Tab 17</a>
    <div>... 30 lines of CSS is rather a lot, and...</div>
  </div>
  <div id="tab18">
    <a href="#tab18">Tab 18</a>
    <div>... that 2 should have been enough, but...</div>
  </div>
</div>

</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

主要问题是z-index: -1规则中设置的.w3c > div:target > div。将其更改为1，它会将目标移至顶部。

第二个问题是您在bottom: 0规则中设置.w3c > div > div的位置。这将防止其内容的大小。我删除了它并添加了min-height: 100%;

Updated fiddle

Stack snippet

＆＃13;

＆＃13;

/* Acordeon styles */

.tab1 {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #0072c6;
  overflow: hidden;
}

.tab1 p {
  color: black;
}

.tab > input {
  position: absolute;
  opacity: 0;
}

.tab > label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  /*background-color:aliceblue;
  font-weight: bold;*/
  line-height: 3;
  cursor: pointer;
}

.blue label {
  background: #2980b9;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  background: white;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

.blue .tab-content {
  background: #3498db;
}

.tab-content p {
  margin: 1em;
}

.tab > input:checked ~ .tab-content {
  max-height: 100%;
}

.tab > label::after {
  position: absolute;
  left: -20px;
  top: -9px;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3em;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.tab > input[type=checkbox] + label::after {
  content: " + ";
  font-size: 18px;
  font-weight: 900;
}

.tab > input[type=radio] + label::after {
  content: " \25BC ";
}

.tab > input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}

.tab > input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

.row {
  background-color: white;
}

.ms-srch-sb {
  min-width: 150px !important;
}

.page-wrap {
  width: 80%;
  margin: 0 auto;
}

input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tab-wrap {
  width: 100%;
  float: none;
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.tab-wrap li {
  float: left;
  display: block;
}

.tab-wrap label {
  position: relative;
  display: inline-block;
  padding: 1.5em 1.5em 1em;
  color: inherit;
  text-decoration: none;
  margin: 0 10px 0 0px;
}
/*
.label-1 {
  z-index: 100;
}

.label-2 {
  z-index: 90;
}

.label-3 {
  z-index: 80;
}
*/
.tab-wrap label:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  left: 0;
  /*z-index: -1;*/
  border: .1em solid #aaa;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(229, 229, 229, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  -webkit-transform: perspective(5px) rotateX(2deg);
  transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}

.tab-wrap .tab-content {
  /*z-index: 200;*/
  display: none;
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 53px;
  left: 0;
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  border: .1em solid #aaa;
  border-top: 0;
}

.tab-wrap [id^="tab"]:checked + label {
  /*z-index: 200;*/
  margin-bottom: -1px;
  border-top-width: 1px;
}

.tab-wrap [id^="tab"]:checked + label:before {
  background: #fff;
}

.tab-wrap [id^="tab"]:checked ~ .tab-content {
  display: block;
}


/* Stuff for example six */

.w3c {
  min-height: 150px;
  position: relative;
  width: 100%;
}

.w3c > div {
  display: inline;
}

.w3c > div > a {
  margin-left: -1px;
  position: relative;
  left: 1px;
  text-decoration: none;
  color: black;
  background: white;
  display: block;
  float: left;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-bottom: 1px solid white;
}

.w3c > div:not(:target) > a {
  border-bottom: 0;
  background: -moz-linear-gradient(top, white, #eee);
}

.w3c > div:target > a {
  background: white;
}

.w3c > div > div {
  background: white;
  /*z-index: -2;*/
  left: 0;
  top: 30px;
  /*bottom: 0;*/
  min-height: 100%;        /*  added so it grows with content  */
  right: 0;
  padding: 20px;
  border: 1px solid #ccc;
}

.w3c > div:not(:target) > div {
  position: absolute;
}

.w3c > div:target > div {
  position: absolute;
  z-index: 1;
}

＆＃13;

<div class="w3c">
  <div id="tab16">
    <a href="#tab16">Tab 16</a>
    <div>    
      <div class="tab">
        <input id="tab-one" type="checkbox" name="tabs">
        <label for="tab-one">Introduction to SharePoint</label>
        <div class="tab-content">
          <div>
            <div class="column2">
              <a href=""><img src="../images/classroom1.png"></a>
              <a href=""><img src="../images/document1.png"></a>
              <a href=""><img src="../images/presentation1.png"></a>
              <a href=""><img src="../images/video1.png"></a>
            </div>
          </div>
        </div>
      </div>
      <div class="tab">
        <input id="tab-two" type="checkbox" name="tabs">
        <label for="tab-two">Label Two</label>
        <div class="tab-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
      </div>
      <div class="tab">
        <input id="tab-three" type="checkbox" name="tabs">
        <label for="tab-three">Label Three</label>
        <div class="tab-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="tab17">
    <a href="#tab17">Tab 17</a>
    <div>... 30 lines of CSS is rather a lot, and...</div>
  </div>
  <div id="tab18">
    <a href="#tab18">Tab 18</a>
    <div>... that 2 should have been enough, but...</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

一些注意事项：

• 作为孩子，<p>不允许div，因此我将其更改为<div>

• 我设置了很多z-index并且我将所有这些设置都注释掉了，但我建议只在必要时才使用它们