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>