Question

当前结果 我的每个标签都只控制第一个框，而不是控制它们所在的框。

期望的结果 使每个按钮仅触发同一div内的内容，而不是控制第一个div中的内容。

我也不想拥有一堆不同的ID，所以使用javascript有更简单的方法吗？

问题那么如何让第一个按钮仅控制它所在的盒子，而第二个按钮只控制它所在的盒子呢？

＆＃13;

body {
  background: #CCC;
  font-family: 'Varela Round', sans-serif;
}

#collapse {
  color: #fff;
  background: #494949;
  border-radius: 10px;
  width: 300px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
  text-align: center;
}

p {
  font-size: 13px;
}

input {
  display: none;
  visibility: hidden;
}

label {
  width: 90px;
  margin: 0 auto;
  margin-bottom: 5px;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #4ada95;
  border-radius: 5px;
}

label:hover {
  color: #494949;
}

label::before {}

#expand {
  height: 225px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: #4ada95;
  color: #FFF;
  width: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
}

li {
  list-style-type: none;
  padding: 10px;
  margin: 0 auto;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 0px;
}

#toggle:checked~label::before {
  display: hidden;
}

＆＃13;

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="collapse.css" rel="stylesheet">
</head>

<body>
  <main>
    <div id="collapse">
      <h2>Icon Quiz</h2>
      <input id="toggle" type="checkbox" checked>
      <label for="toggle">take quiz</label>
      <div id="expand">
        <section>
          <h3>which icon is used for GitHub?</h3>
          <li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
          <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
          <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
        </section>
      </div>
    </div>
    <div id="collapse">
      <h2>Another Quiz</h2>
      <input id="toggle" type="checkbox" checked>
      <label for="toggle">take quiz</label>
      <div id="expand">
        <section>
          <h3>test?</h3>
          <li>blah</li>
          <li>blah</li>
          <li>blah</li>
        </section>
      </div>
    </div>
  </main>
</body>

</html>

＆＃13;

Answer 1

您需要拥有唯一的ID。 ID应该只使用一次。

body {
  background: #CCC;
  font-family: 'Varela Round', sans-serif;
}

#collapse {
  color: #fff;
  background: #494949;
  border-radius: 10px;
  width: 300px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
  text-align: center;
}

p {
  font-size: 13px;
}

input {
  display: none;
  visibility: hidden;
}

label {
  width: 90px;
  margin: 0 auto;
  margin-bottom: 5px;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #4ada95;
  border-radius: 5px;
}

label:hover {
  color: #494949;
}

label::before {}

#expand,
#expand2{
  height: 225px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: #4ada95;
  color: #FFF;
  width: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
}

li {
  list-style-type: none;
  padding: 10px;
  margin: 0 auto;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 0px;
}

#toggle:checked~label::before {
  display: hidden;
}

#toggle2:checked~#expand2 {
  height: 0px;
}

#toggle2:checked~label::before {
  display: hidden;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="collapse.css" rel="stylesheet">
</head>

<body>
  <main>
    <div id="collapse">
      <h2>Icon Quiz</h2>
      <input id="toggle" type="checkbox" checked>
      <label for="toggle">take quiz</label>
      <div id="expand">
        <section>
          <h3>which icon is used for GitHub?</h3>
          <li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
          <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
          <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
        </section>
      </div>
    </div>
    <div id="collapse">
      <h2>Another Quiz</h2>
      <input id="toggle2" type="checkbox" checked>
      <label for="toggle2">take quiz</label>
      <div id="expand2">
        <section>
          <h3>test?</h3>
          <li>blah</li>
          <li>blah</li>
          <li>blah</li>
        </section>
      </div>
    </div>
  </main>
</body>

</html>

如何切换不同的div

1 个答案: