javascript - CSS Accordion 点击关闭

Question

我有纯 CSS Accordion ，我希望每个面板在单击时关闭。我可以仅使用 CSS 实现此目的还是必须添加 JavaScript？

#accordion input:not(:checked) + div {
  display: none;
}

#accordion input:checked + div {
  display: block;
}

#accordion input {
  width: 0px;
  height: 0px;
  margin: 0px;
  opacity: 0.0;
}

#accordion label {
  cursor: pointer;
  display: inline-block;
  width: 750px;
  background: #ffffff;
  color: #ff6600;
  font-family: open sans;
  border: 1px solid #ff6600;
  font-size: 24px;
  padding: 25px 20px;
  margin: 0px;
}

#accordion div {
  width: 750px;
  background: white;
  border: 1px solid gray;
  padding: 15px 20px;
}

#accordion li {
  list-style: none;
}
div.scroll {
  max-height: 1050px;
  overflow: auto;
}
.timely-stream:not(.timely-agenda) .timely-event {
  min-height:92px; !important
}

<ul id="accordion">
<li>
<label for="section-1-checkbox">OneHockey</label>
<input id="section-1-checkbox" type="radio" name="accordion-level-1" />
<div><a href="https://imgur.com/HJwXuym"><img 
src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" 
title="source: imgur.com" /></a></div>
</li>
<li>
<label for="section-2-checkbox">TOURNAMENTS</label>
<input id="section-2-checkbox" type="radio" name="accordion-level-1" />
<div class="scroll">
<script src="//dashboard.time.ly/js/embed.js" data- 
src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" 
data-max-height="0" id="timely_script" class="timely-script"></script>
</div>
</li>
<li>
<label for="section-3-checkbox">INFO</label>
<input id="section-3-checkbox" type="radio" name="accordion-level-1" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<label for="section-4-checkbox">STANDINGS/SCHEDULE</label>
<input id="section-4-checkbox" type="radio" name="accordion-level-1" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>

Answer 1

根据我上面的评论:如果您需要能够通过单击取消选择某个元素，则需要从单选按钮切换到复选框。这会导致打开多个面板。如果您必须让它在打开新面板时自动关闭其他面板，并且如果您再次单击它必须关闭打开的面板，那么您至少需要一点 javascript。

所以，下面是您的代码，有两个小的修改:

1. 我已将单选按钮更改为复选框。
2. 我添加了一个小的 jQuery 代码片段，它强制执行“ Accordion ”方法，在面板打开时关闭其他面板。

jQuery(function($) {
  $('input[type="checkbox"]').on('change', function() {
    let state = $(this).is(':checked');
    $('input[type="checkbox"]').prop('checked', false);
    $(this).prop('checked', state);
  });
});

#accordion input:not(:checked)+div {
  display: none;
}

#accordion input:checked+div {
  display: block;
}

#accordion input {
  width: 0px;
  height: 0px;
  margin: 0px;
  opacity: 0.0;
}

#accordion label {
  cursor: pointer;
  display: inline-block;
  width: 750px;
  background: #ffffff;
  color: #ff6600;
  font-family: open sans;
  border: 1px solid #ff6600;
  font-size: 24px;
  padding: 25px 20px;
  margin: 0px;
}

#accordion div {
  width: 750px;
  background: white;
  border: 1px solid gray;
  padding: 15px 20px;
}

#accordion li {
  list-style: none;
}

div.scroll {
  max-height: 1050px;
  overflow: auto;
}

.timely-stream:not(.timely-agenda) .timely-event {
  min-height: 92px;
  !important
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="accordion">
  <li>
    <label for="section-1-checkbox">OneHockey</label>
    <input id="section-1-checkbox" type="checkbox" name="accordion-level-1" />
    <div>
      <a href="https://imgur.com/HJwXuym"><img src="https://i.imgur.com/HJwXuym.png?1" width="750px" height="422px" title="source: imgur.com" /></a>
    </div>
  </li>
  <li>
    <label for="section-2-checkbox">TOURNAMENTS</label>
    <input id="section-2-checkbox" type="checkbox" name="accordion-level-1" />
    <div class="scroll">
    </div>
  </li>
  <li>
    <label for="section-3-checkbox">INFO</label>
    <input id="section-3-checkbox" type="checkbox" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
  <li>
    <label for="section-4-checkbox">STANDINGS/SCHEDULE</label>
    <input id="section-4-checkbox" type="checkbox" name="accordion-level-1" />
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </li>
</ul>