javascript - 使 jQuery 附加标签可以切换复选框

Question

我有一个包含以下标记的列表:

<div class="container">
    <div class="element">
        <input type="checkbox" id="checkbox1" class="toggler">
        <label for="checkbox1">Toggle +</label>
        <div class="more-info">
            <p>...</p>
        </div>
    </div>
    <div class="element">
        ...
    </div>
</div>

目的是用纯CSS做切换功能，所以我用这个来隐藏/显示<div class="more-info">...</div> :

.more-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease;
}

.toggler:checked ~ .more-info {
    max-height: 200px;
    opacity: 0;
    overflow: hidden;
}

在容器下，我有一个按钮，它将获取(在本例中它是静态的)元素并附加到容器。这就是我遇到的问题，新元素中的标签不会切换复选框。如果我使复选框可见并直接选中它，它就可以工作。

I have also made a codepen to illustrate my problem .

提前致谢:)

Answer 1

您的代码中有两个问题。首先有一个 $a()，它应该只是 $()。您还将附加复选框的类设置为 chekcbox 而不是 checkbox。试试这个:

$(document).ready(function() {
  var i = 1;
  $('#more').click(function(e) {
    e.preventDefault();

    var element, checkbox, label, moreInfo, dummyText;
    i++
    dummyText = $('<p />').text('Similique dis egestas aptent exercitationem sequi urna, nonummy laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil. Similique dis egestas aptent exercitationem sequi urna, nonummy laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil.');
    checkbox = $('<input />', {
      id: 'checkbox' + i,
      class: 'toggler',
      type: 'checkbox'
    });
    label = $('<label />', {
      for: 'checkbox' + i,
      text: 'Toggle +'
    });
    moreInfo = $('<div />', {
      class: 'more-info',
      html: dummyText
    });
    element = $('<div />', {
      class: 'element'
    }).append(checkbox, label, moreInfo);

    $('.container').append(element);
  })
});

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 18px;
}

.container {
  display: block;
  margin: 50px auto;
  width: 500px;
  padding: 30px;
  background-color: #ededed;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}

.toggler {
  display: none;
}

.more-info {
  margin-bottom: 20px;
  padding-bottom: 20px;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-bottom: solid 1px #ababab;
  transition: all .3s ease;
}

.more-info>p {
  margin: 0;
}

.toggler:checked~.more-info {
  max-height: 200px;
  opacity: 1;
}

#more {
  display: block;
  margin: 30px auto 0;
  padding: 10px 0;
  width: 120px;
  text-align: center;
  color: #3498db;
  border: solid 2px #3498db;
  border-radius: 22px;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <div class="element">
    <input id="checkbox1" class="toggler" type="checkbox">
    <label for="checkbox1">Toggle +</label>
    <div class="more-info">
      <p>Similique dis egestas aptent exercitationem sequi urna, nonummy laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil. Similique dis egestas aptent exercitationem sequi urna, nonummy
        laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil.</p>
    </div>
  </div>
</div>

<a href="#" id="more">Get more</a>