typecho博客如何从0建立折叠侧栏

OS搞了一天的结晶垃圾，改改也能适配别的网站,除了wikidot之外。
JS部分：

function mb_sidebar_hide(){
    var a = document.getElementById('secondary');
    a.style.display='none';
    a.style.zIndex='0';
    a = document.getElementsByClassName('container');
    a[1].style.margin='auto';
}
function mb_sidebar_show(){
    var a = document.getElementById('secondary');
    a.style.display='block';
    a.style.position='fixed';
    a.style.zIndex='1';
    a = document.getElementsByClassName('container');
    a[1].style.margin='0';
}
function pressbutton(){
    var a = document.getElementById('secondary');
    if(a.style.display=='block') mb_sidebar_hide();
    else mb_sidebar_show();
}

PHP（直接放到html里也行，但是你懂的，typecho用的是php）：

    <a class="mobile-icon" href="##" onclick="pressbutton();">
        <svg height="30" width="30">
            <path d="M0,5,30,5" stroke="grey" stroke-width="5"/>
            <path d="M0,14,30,14" stroke="grey" stroke-width="5"/>
            <path d="M0,23,30,23" stroke="grey" stroke-width="5"/>
        </svg>
    </a>

css部分：

#secondary{
display:block;
}
 
.mobile-icon{
display:none;
}
  @media (max-width: 1000px){/*根据需要自己改这个最大显示*/
    .mobile-icon{
      display:block;
      width: 35px;
      height: 35px;
      margin-left:10px;
      margin-top:7px;
      background: #ffffff;
      border: #000000;
      position: fixed;/*不随页面滚动而移动*/
      z-index: 2;
    }
    .mobile-icon svg{
      margin-left:2px;
      margin-top:2px;
    }
    .mobile-show{
      display:block;
    }
    #secondary{
      display:none;
      border-radius: 0;
      top:0;
      bottom:0;
      overflow-y:scroll;
      overflow-x:hidden;
    }
  }

---

讨论区

(account deleted) 11 Jan 2023 16:57

注：secondary就是侧栏div的元素名称

---

Saving page…