Question

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

@Override
public void onTestSuccess(ITestResult testResult) {
    // Reporter.getOutput(testResult)will give the output logged in testng reporter
    logOutput(Reporter.getOutput(testResult));
    super.onTestSuccess(testResult);
}

purpuse是使用纯CSS来制作切换功能，所以我用它来隐藏/显示<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>：

<div class="more-info">...</div>

在容器下，我有一个按钮，它将获得（在这种情况下它是静态的）元素并附加到容器。这就是我遇到问题的地方，新元素中的标签不会切换复选框。如果我使复选框可见并直接检查它是否有效。

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>

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

1 个答案: