Question

过去两天，我一直在抨击我。我有两个可扩展的div使用css单独创建（没有javascript），他们工作得很好。问题是现在我需要它们在页面加载时默认关闭，但目前它们总是打开。

＆＃13;

.borderedblue {
  padding: 5px;
  border: 3px solid #55AECB;
}

.borderedbluemob {
  padding: 5px;
  border: 3px solid #55AECB;
}

.borderedpurple {
  padding: 5px;
  border: 3px solid #C2A6CD;
}

.borderedpurplemob {
  padding: 5px;
  border: 3px solid #C2A6CD;
}

input {
  display: none;
  visibility: hidden;
}

label {
  display: block;
  padding: 0.5em;
  text-align: center;
  color: #666;
}

label:hover {
  color: #000;
}

label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 12px;
  color: #ffffff;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #5D7073 50%, transparent 50%);
}

#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background: #F2F2F2;
  color: #2B3C41;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 250px;
}

#toggle:checked~label::before {
  content: "-";
}

#toggle2:checked~#expand {
  height: 350px;
}

#toggle2:checked~label::before {
  content: "-";
}

#togglemob:checked~#expand {
  height: 320px;
}

#togglemob:checked~label::before {
  content: "-";
}

#toggle2mob:checked~#expand {
  height: 550px;
}

#toggle2mob:checked~label::before {
  content: "-";
}

＆＃13;

<div align="center" class="row">
  <div class="col-md-6">
    <div class="borderedblue">
      <h2>Your bill - top tips.</h2>
      <input checked="checked" id="toggle" type="checkbox" />
      <label for="toggle">Find out more</label>

      <div id="expand">
        <ul>
          <li style="text-align: left;">Register for <a class="idLink" href="#" target="_blank">MyBill</a> so you can keep tabs on how you're doing.
          </li>
          <li style="text-align: left;">On MyBill you'll find a full breakdown of how much data, minutes and texts you've used and how much you've left.</li>
          <li style="text-align: left;">You'll receive your bill the second week of every month, with payment taken approximately 14 days later. We'll even send you a text when your bill is ready!</li>
          <li style="text-align: left;">To understand the maths behind your first bill, just watch our useful video below.</li>
        </ul>
      </div>
    </div>
  </div>
  <!--/.col-md-6 -->

  <div class="col-md-6">
    <div class="borderedpurple">
      <h2>Pro rata explained</h2>
      <input checked="checked" id="toggle2" type="checkbox" />
      <label for="toggle2">Find out more</label>

      <div id="expand">
        <section>
          <ul>
            <li style="text-align: left;">Your billing period runs from the first day of each month to the last.</li>
            <li style="text-align: left;">But not everyone joins myBill on the 1st of the month. If you didn't sign up on the 1st of the month you get a proportion of your chosen bundle (data, minutes, and texts) based on the date you joined myBill, to use for the rest of the month.</li>
            <li style="text-align: left;">This is known as a pro rata amount, and you will only be charged for that proportion. If you go over that, you will be charged ;out of bundle charges.</li>
            <li style="text-align: left;">You are always billed a month in advance for your plan. This means that any out of bundle charges will be charged the following month.</li>
            <li style="text-align: left;">In your first full calendar month, you'll get the full bundle and be charged your full price plan amount.
            </li>
          </ul>
        </section>
      </div>
    </div>
  </div>
  <!--/.col-md-6-->
</div>
<!--/.row-->

＆＃13;

它完全按照我的需要行事，我只能弄清楚如何在页面加载时将两个框设置为关闭，最好不使用javascript。

这里的任何帮助都很棒，提前谢谢！

Answer 1

只需删除

checked="checked"

.borderedblue {
  padding: 5px;
  border: 3px solid #55AECB;
}

.borderedbluemob {
  padding: 5px;
  border: 3px solid #55AECB;
}

.borderedpurple {
  padding: 5px;
  border: 3px solid #C2A6CD;
}

.borderedpurplemob {
  padding: 5px;
  border: 3px solid #C2A6CD;
}

input {
  display: none;
  visibility: hidden;
}

label {
  display: block;
  padding: 0.5em;
  text-align: center;
  color: #666;
}

label:hover {
  color: #000;
}

label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 12px;
  color: #ffffff;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #5D7073 50%, transparent 50%);
}

#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background: #F2F2F2;
  color: #2B3C41;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 250px;
}

#toggle:checked~label::before {
  content: "-";
}

#toggle2:checked~#expand {
  height: 350px;
}

#toggle2:checked~label::before {
  content: "-";
}

#togglemob:checked~#expand {
  height: 320px;
}

#togglemob:checked~label::before {
  content: "-";
}

#toggle2mob:checked~#expand {
  height: 550px;
}

#toggle2mob:checked~label::before {
  content: "-";
}

<div align="center" class="row">
  <div class="col-md-6">
    <div class="borderedblue">
      <h2>Your bill - top tips.</h2>
      <input id="toggle" type="checkbox" />
      <label for="toggle">Find out more</label>

      <div id="expand">
        <ul>
          <li style="text-align: left;">Register for <a class="idLink" href="#" target="_blank">MyBill</a> so you can keep tabs on how you're doing.
          </li>
          <li style="text-align: left;">On MyBill you'll find a full breakdown of how much data, minutes and texts you've used and how much you've left.</li>
          <li style="text-align: left;">You'll receive your bill the second week of every month, with payment taken approximately 14 days later. We'll even send you a text when your bill is ready!</li>
          <li style="text-align: left;">To understand the maths behind your first bill, just watch our useful video below.</li>
        </ul>
      </div>
    </div>
  </div>
  <!--/.col-md-6 -->

  <div class="col-md-6">
    <div class="borderedpurple">
      <h2>Pro rata explained</h2>
      <input id="toggle2" type="checkbox" />
      <label for="toggle2">Find out more</label>

      <div id="expand">
        <section>
          <ul>
            <li style="text-align: left;">Your billing period runs from the first day of each month to the last.</li>
            <li style="text-align: left;">But not everyone joins myBill on the 1st of the month. If you didn't sign up on the 1st of the month you get a proportion of your chosen bundle (data, minutes, and texts) based on the date you joined myBill, to use for the rest of the month.</li>
            <li style="text-align: left;">This is known as a pro rata amount, and you will only be charged for that proportion. If you go over that, you will be charged ;out of bundle charges.</li>
            <li style="text-align: left;">You are always billed a month in advance for your plan. This means that any out of bundle charges will be charged the following month.</li>
            <li style="text-align: left;">In your first full calendar month, you'll get the full bundle and be charged your full price plan amount.
            </li>
          </ul>
        </section>
      </div>
    </div>
  </div>
  <!--/.col-md-6-->
</div>
<!--/.row-->

如何在默认情况下关闭这些可扩展的div？

1 个答案: