Question

要在https://khofstadter.info/上列出投资组合项目，我将这个想法用于https://bernholdtech.blogspot.com/2013/04/very-simple-pure-css-collapsible-list.html中可折叠的复选框。

如何通过选中另一个复选框来取消选中活动/打开复选框？即我想确保始终只有一个复选框处于打开状态。

我试图在Stackoverflow的相关文章中使用这些解决方案。

CSS

.collapsibleList li > input + * {
 display: none;
}

.collapsibleList li > input:checked + * {
 display: block;
}

.collapsibleList li > input {
 display: none;
}

.collapsibleList label {
 cursor: pointer;
}

HTML代码

<ul class="collapsibleList">
 <li>
  <label for="mylist-node1">Click to open list 1</label>
  <input type="checkbox" id="mylist-node1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="mylist-node2">Click to open list 2</label>
  <input type="checkbox" id="mylist-node2" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>

理想情况下，我希望保留CSS和HTML，但如果需要可以使用JS。

谢谢！ k

Answer 1

描述的行为OP是一组共享相同<input type='radio'>属性的[name]的行为-只能选中一个单选按钮。

将visibility:collapse/visible max-height:0/(large number)px，transition添加到<li>并将overflow:hidden添加到<ul>使列表折叠/展开动画。还使用了伪元素::after，CSS函数attr()和data-idx，以便每个标签的文本切换为“打开/关闭”文本。

JavaScript和添加的<form>标签允许像复选框一样切换单选按钮。现在，两种行为均已实现，详细信息在演示中进行了评论。

// Register the first <form> to click event callback is chx()
document.forms[0].onclick = chx;

/*
//A Pass the Event Object
//B Reference the clicked tag's (e.target) preceding  
    adjacent sibling tag (radio button before clicked
    label (e.target))
//C if the clicked tag is a <label>...
//D and if the radio button occuring before the clicked
    label is checked... 
//E -- uncheck it...
//F otherwise check it
*/
function chx(e) { //A
  const node = e.target.previousElementSibling; //B
  if (e.target.matches('label')) { //C
    if (node.checked) { //D
      node.checked = false; //E
    } else {
      node.checked = true; //F
    }
  }
  return false;
}

.node {
  display: none
}

label {
  cursor: pointer
}

ul {
  overflow: hidden
}

.node+label::after {
  content: ' open list 'attr(data-idx);
}

.node+label+ul li {
  visibility: collapse;
  max-height: 0;
  transition: 1s;
}

.node:checked+label::after {
  content: ' close list 'attr(data-idx);
}

.node:checked+label+ul li {
  visibility: visible;
  max-height: 500px;
  transition: 1s;
}

<form onsubmit='return false'>
  <ul class="lists">
    <li>
      <input id="node1" name='node' class='node' type="radio">
      <label for="node1" data-idx='1'>Click to</label>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </li>
    <li>
      <input id="node2" name='node' class='node' type="radio">
      <label for="node2" data-idx='2'>Click to</label>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </li>
  </ul>
</form>

选中一个复选框将关闭HTML / CSS中的所有其他复选框

1 个答案: