在 OJS 2.4.8.5 中折疊側邊欄導航

Question

我的大學使用 Open Journal System 2.4.8.5（一個非常舊的版本）。 HTML 不支持<details>和<summary> ，我不能使用 JS。 此外，我無權訪問服務器，但我們可以上傳自己的樣式表，我可以在其中替換一些內置的 CSS 代碼。

我想制作一個像這樣的塊側邊欄：

你可以在這里看到它的實際效果。

我想應用它的一面是http://jurnal.unsyiah.ac.id/SiELE 。

非常感謝您的幫助。

Answer 1

這是一個完全依賴 CSS 來實現功能的解決方案。 單選按鈕用於跟蹤是否正在查看面板。 當一個單選按鈕被:checked ，顯示緊隨其后的span 。

 .dropdown { border-color: #eeeeee; border-radius: 10px; border-style: solid; border-width: 1px; font-family: sans-serif; margin: 10px; overflow: hidden; position: relative; } .dropdown h1 { background-color: #eeeeee; padding: 10px 20px; margin: 0; width: 100%; } .dropdown input { display: block; float: right; position: absolute; right: 10px; top: 10px; visibility: hidden; } .dropdown input:after { content: "+"; float: right; font-size: 25px; visibility: visible; } .dropdown input:checked:after { content: '\\2013'; } .dropdown input + span { display: none; padding: 10px 20px; } .dropdown input:checked + span { display: block }

 <div class="dropdown"> <h1>Title 1</h1> <input type="radio" name="dropdown"> <span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra ex massa, at suscipit justo sagittis quis. Duis sed orci lorem. In purus metus, lacinia ac nibh vitae, gravida malesuada urna. Suspendisse potenti. Vivamus tellus ligula, iaculis nec ex vel, dictum interdum augue. Mauris dignissim orci tincidunt, feugiat purus nec, rhoncus nulla. Etiam consequat ullamcorper lobortis. Integer vel erat dapibus, tincidunt nunc eu, sodales ex. Cras a dolor ut libero gravida sagittis. In hac habitasse platea dictumst. Aliquam et sapien porttitor, ullamcorper tellus ut, viverra orci. Morbi sit amet lacus a arcu varius eleifend sit amet vitae lacus. Pellentesque quis sagittis metus.</p> </span> </div> <div class="dropdown"> <h1>Title 2</h1> <input type="radio" name="dropdown"> <span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra ex massa, at suscipit justo sagittis quis. Duis sed orci lorem. In purus metus, lacinia ac nibh vitae, gravida malesuada urna. Suspendisse potenti. Vivamus tellus ligula, iaculis nec ex vel, dictum interdum augue. Mauris dignissim orci tincidunt, feugiat purus nec, rhoncus nulla. Etiam consequat ullamcorper lobortis. Integer vel erat dapibus, tincidunt nunc eu, sodales ex. Cras a dolor ut libero gravida sagittis. In hac habitasse platea dictumst. Aliquam et sapien porttitor, ullamcorper tellus ut, viverra orci. Morbi sit amet lacus a arcu varius eleifend sit amet vitae lacus. Pellentesque quis sagittis metus.</p> </span> </div> <div class="dropdown"> <h1>Title 3</h1> <input type="radio" name="dropdown"> <span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra ex massa, at suscipit justo sagittis quis. Duis sed orci lorem. In purus metus, lacinia ac nibh vitae, gravida malesuada urna. Suspendisse potenti. Vivamus tellus ligula, iaculis nec ex vel, dictum interdum augue. Mauris dignissim orci tincidunt, feugiat purus nec, rhoncus nulla. Etiam consequat ullamcorper lobortis. Integer vel erat dapibus, tincidunt nunc eu, sodales ex. Cras a dolor ut libero gravida sagittis. In hac habitasse platea dictumst. Aliquam et sapien porttitor, ullamcorper tellus ut, viverra orci. Morbi sit amet lacus a arcu varius eleifend sit amet vitae lacus. Pellentesque quis sagittis metus.</p> </span> </div>