'checkbox' 到 'show div' 更简单的方法是什么？

Question

目前我正在使用 css，这看起来不错，直到我意识到我需要很多这些 'checkbox to show div'，我假设有一些漂亮的 jquery 方法可以做到这一点。 https://jsfiddle.net/0qnsvgcw/

<style>
    #part1, #part2 {display: none;} 

    #reveal-part1:checked ~ #part1{display: inline-block;}
    #reveal-part1:checked ~ .qntylabel{margin-right: 0px;}

    #reveal-part2:checked ~ #part2{display: inline-block;}
    #reveal-part2:checked ~ .qntylabel{margin-right: 0px;}
</style>

<html>
<input type="checkbox" id="reveal-part1" class="apple-switch"><span class="qntylabel">10 PIN COMPON</span>
<div id="part1"><input type="text" id="" class="qnty" placeholder="QTY"/></div>
<br>
<input type="checkbox" id="reveal-part2" class="apple-switch"><span class="qntylabel">10 PIN COMPOS</span>
<div id="part2"><input type="text" id="" class="qnty" placeholder="QTY"/></div>
</html>

Answer 1

最好的方法仍然是 CSS。您可以通过将每组元素包装在一个容器中来使逻辑更通用，例如下面示例中的 div，然后将 common 类放在每个元素上，然后您可以在 CSS。试试这个：

.part {
  display: none;
}

.reveal:checked ~ .part {
  display: inline-block;
}

.reveal:checked ~ .qntylabel {
  margin-right: 0px;
}

<div>
  <input type="checkbox" class="apple-switch reveal">
  <span class="qntylabel">10 PIN COMPON</span>
  <div class="part">
    <input type="text" id="" class="qnty" placeholder="QTY" />
  </div>
</div>
<div>
  <input type="checkbox" class="apple-switch reveal">
  <span class="qntylabel">10 PIN COMPOS</span>
  <div class="part">
    <input type="text" id="" class="qnty" placeholder="QTY" />
  </div>
</div>
<div>
  <input type="checkbox" class="apple-switch reveal">
  <span class="qntylabel">10 PIN COMPOS</span>
  <div class="part">
    <input type="text" id="" class="qnty" placeholder="QTY" />
  </div>
</div>
<div>
  <input type="checkbox" class="apple-switch reveal">
  <span class="qntylabel">10 PIN COMPOS</span>
  <div class="part">
    <input type="text" id="" class="qnty" placeholder="QTY" />
  </div>
</div>

Answer 2

您可以将 CSS 中的 ID (#) 替换为 class (.)，然后将 HTML 写入结构相同的方式。这样，您可以将样式应用于 HTML 的多个案例。

.toggle ~ .toggle-target {
  display: none
}

.toggle:checked ~ .toggle-target {
  display: block
}

<div>
  <input type="checkbox" class="toggle"><span class="qntylabel">10 PIN COMPON</span>
  <div class="toggle-target"><input type="text" id="" class="qnty" placeholder="QTY" /></div>
</div>

<div>
  <input type="checkbox" class="toggle"><span class="qntylabel">10 PIN COMPOS</span>
  <div class="toggle-target"><input type="text" id="" class="qnty" placeholder="QTY" /></div>
</div>

'checkbox' 到 'show div' 更简单的方法是什么？

What is an easier way for 'checkbox' to 'show div'?

html

javascript

css

jquery

show-hide