在 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>