OJS 2.4.8.5仅通过自定义CSS实现侧边栏折叠导航的方法咨询

实现原理 #

完全基于HTML原生<input type="checkbox">+<label>的交互逻辑配合CSS伪类实现，不需要JS、不需要HTML5新标签，兼容老旧浏览器，仅需添加自定义CSS+修改侧边栏区块的配置内容即可，无需服务器操作权限。

操作步骤 #

• 第一步：编辑侧边栏要做折叠效果的区块（在OJS后台区块管理界面即可操作，无需改源码）
  把每个目标区块的原有内容替换为如下结构，注意每个区块的id和for属性值要唯一，避免冲突：

  <input type="checkbox" id="blockToggle1" class="block-toggle">
  <h3 class="blockTitle">
    <label for="blockToggle1">你的区块标题</label>
  </h3>
  <div class="blockContent">
    此处保留原有区块的全部内容即可
  </div>
  

• 第二步：将下方CSS代码粘贴到后台自定义样式表的编辑框，保存后直接生效

  /* 隐藏原生复选框 */
  .block-toggle {
    position: absolute;
    opacity: 0;
    visibility: hidden;
  }
  /* 给区块标题增加点击样式 */
  .blockTitle label {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* 标题右侧添加折叠状态箭头，无需引入额外图标 */
  .blockTitle label::after {
    content: "▼";
    font-size: 0.8em;
    transition: transform 0.2s ease;
  }
  /* 默认折叠隐藏区块内容 */
  .block-toggle ~ .blockContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  /* 选中状态下展开内容、旋转箭头 */
  .block-toggle:checked ~ .blockContent {
    max-height: 1200px; /* 数值设置为大于你最大区块内容的高度即可 */
  }
  .block-toggle:checked ~ .blockTitle label::after {
    transform: rotate(180deg);
  }
  

适配调整说明 #

• 如果原有主题样式和上述代码冲突，可以给选择器增加父级层级提高优先级，比如侧边栏父容器ID是#sidebar，就把所有选择器前面加#sidebar
• 如果需要兼容IE8及更老版本，删除所有transition相关代码即可，折叠功能不受影响，只是没有动画效果

内容的提问来源于stack exchange，提问作者Faisal Mustafa