CSS手风琴关闭点击

Question

我有纯 CSS 手风琴，我希望每个面板在点击时关闭。 我可以仅使用 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 代码段，它在打开面板时强制执行关闭其他面板的“手风琴”方法。

 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>

Answer 2

您将需要使用 JS。 创建一个 ID 为“关闭”的按钮

jQuery(function($) {
   $( "#close" ).click(function() {
       $( "#target" ).toggle();
    });
});

这将通过 JS 隐藏它或使用

jQuery(function($) {
    $( "#close" ).click(function() {
         $( "#target" ).addClass('hidden');
     });
});

隐藏将被定义为：隐藏：显示：无；

Answer 3

这很丑陋，但它在没有 JavaScript 的情况下为您提供了您想要的东西。

您可以使用标准链接和:target伪类。

链接到包含目标手风琴项目的li 。 然后显示项目并切换打开和关闭链接

就个人而言，我会选择一个简单的 javascript 增强选项。

 /*Hide child div*/ #accordion li > div { display: none; } #accordion li a.close { display: none; } /*Display target div*/ #accordion li:target > div { display: block; } /*Toggle open and close links*/ #accordion li:target > a.open { display:none; } #accordion li:target > a.close { display:block; } #accordion a { 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; text-decoration:none; } #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 id="section1"> <a href="#section1" class="open">OneHockey</a> <a href="#" class="close">OneHockey</a> <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 id="section2"> <a href="#section2" class="open">TOURNAMENTS</a> <a href="#" class="close" >TOURNAMENTS</a> <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 id="section3"> <a href="#section3" class="open">INFO</a> <a href="#" class="close">INFO</a> <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> <li id="section4"> <a href="#section4" class="open">STANDINGS/SCHEDULE</a> <a href="#" class="close">STANDINGS/SCHEDULE</a> <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </li> </ul>