javascript - MaterializeCSS 中带有复选框的可折叠标题

Question

我需要在标题中使用复选框制作一个可折叠的(在 MaterializeCSS 中)

我需要每次单击选中的复选框时，相应的可折叠部分将展开(因此，当未选中时，该部分将折叠)

或者你可以把它想象成:

每次我展开可折叠标题时，复选框都会被选中并且该部分会展开(当我折叠标题时，复选框将被取消选中并且该部分会折叠)

我是 Javascript 和 Materialise 的新手，我很确定有更好的实现，因为我的实现存在问题:

当我在复选框标签的边界之外但仍在可折叠标题 div 的边界内单击时，我的实现不会更新复选框。相反，它只是折叠/展开。很容易理解为什么会发生这种情况，但我想不出解决办法，希望能在这里得到一些想法。

对于下面的试用代码，我强制它只在第一部分工作:

我的 HTML 代码是:

<ul class="collapsible">
    <li>
      <div class="collapsible-header">
      <input id = "isChecked" type = "checkbox" checked = "checked" />
      First
      </div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header">Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

因此，我的 javascript 代码是:

 if (document.getElementById('isChecked').checked)
    {
        $(".one").addClass("active");
    }
    else
    {
        $(".one").removeClass("active");
    }

Answer 1

我制作了单选按钮，以便我们可以从多个选项中选择一个选项。在 let eles = document.querySelectorAll("input[type='radio']"); 的帮助下，您可以获得所有单选输入字段。

将 click 事件附加到所有这些单选按钮

for (let i = 0; i < eles.length; i++) {
  eles[i].addEventListener('click', openColl);
}

然后检查单选按钮是否被选中然后我们可以打开那个可折叠的

openColl = () => {
  for (let i = 0; i < eles.length; i++) {
    if (eles[i].checked) {
      console.log(eles[i].value);
      inst.open(eles[i].value);
    }
  }
};

要打开特定的可折叠部分，我们使用 instance.open(1);。您可以在 materialize 的文档中找到它。

HTML

<p>
  <label>
    <input type="radio" name="group-1" value="0" />
    <span>First</span>
  </label>
</p>
<p>
  <label>
    <input type="radio" name="group-1" value="1" />
    <span>Second</span>
  </label>
</p>
<p>
  <label>
    <input type="radio" name="group-1" value="2" />
    <span>Third</span>
  </label>
</p>

<ul class="collapsible">
  <li>
    <div class="collapsible-header">
      <i class="material-icons">filter_drama</i>First
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">place</i>Second
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">whatshot</i>Third
    </div>
    <div class="collapsible-body">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
  </li>
</ul>

JS

document.addEventListener('DOMContentLoaded', function() {
    let coll = document.querySelector('.collapsible');
    M.Collapsible.init(coll);
    let inst = M.Collapsible.getInstance(coll);
    let eles = document.querySelectorAll("input[type='radio']");
    openColl = () => {
      for (let i = 0; i < eles.length; i++) {
        if (eles[i].checked) {
          console.log(eles[i].value);
          inst.open(eles[i].value);
        }
      }
    };
    for (let i = 0; i < eles.length; i++) {
      eles[i].addEventListener('click', openColl);
    }
})