javascript - 隐藏的侧面板菜单的填充使其部分可见

Question

如果不部分显示，滑出式侧面板菜单将不会保留内部填充。

我剥离了整个站点并尝试更改几乎每个值，但两天的搜索都没有奏效 - 尽管我知道答案对于有经验的编码人员来说是显而易见的。

        .sidePanelTableA {
          height: 80%;
          width: 0;
          position: fixed;
          z-index: 20;      
          top: 0;
          background-color: red;
          overflow-x: hidden;
        }

        #mysidePanelTableA  {
          padding: 0px 0px 8px 0px;     
          <!--0 left padding makes dissapear move padding?-->
        }

        .closebtn {
          color: blue;
          position: absolute;
          right: 25px;
          font-size: 36px;
          margin-left: 50px;
        }

<svg viewbox="0 0 1200 600" preserveAspectRatio="none">
     <g transform="translate(300,364) scale(16)" >
     <g onclick="openPanelTableA()" >
     <rect style="display:inline; fill: yellow;"     
        width="5" height="3" />
</svg>

   function openPanelTableA() {
   document.getElementById("mySidePanelTableA").style.width = "250px";}

   function closePanelTableA() {
   document.getElementById("mySidePanelTableA").style.width = "0";}

<div id="mySidePanelTableA" class="sidePanelTableA">
      <a href="javascript:void(0)" 
               class="closebtn" 
               onclick="closePanelTableA()">
                  &times;
          </a>
          <br><br>
          TITLE
           <br><br>
       <img src="tableA.jpeg" height="200px">
</div>

我希望红色侧面板完全隐藏，但它通过屏幕左侧填充的宽度显示。如果我从面板上移除内部左侧填充，它会被正确隐藏，但随后填充消失了......

提前致谢。

格式错误的代码笔:https://codepen.io/moptopop/pen/RwbVMLv在添加左填充时，效果似乎不会以某种方式显示出来。 (请稍微滚动以单击应该触发问题面板的黄色矩形。抱歉，我无法重新添加图像，但这应该不会影响问题。)

Answer 1

您有两个选择 - 要么在菜单“隐藏”时移除左填充，然后在菜单“显示”时恢复它 - 或者应用 max width:0; overflow:hidden 面板“隐藏”时。

此外 - 添加/删除具有 CSS 样式的类比通过 javascript 直接将 css 添加到元素要好。

请注意，以下代码仅处理宽度/填充/可见性，而不处理侧面过渡等。

//js
function openPanelTableA() {
   document.getElementById("mySidePanelTableA").classList.remove("hide-panel")}

   function closePanelTableA() {
   document.getElementById("mySidePanelTableA").classList.add("hide-panel")}


//css
  #mySidePanelTableA {
   width: 250px;
   padding: 0px 0px 8px 0px;// or whatever padding you want   
  }

  #mySidePanelTableA.hide-panel {
   width: 0;
   max-width: 0;
   overflow: hidden; // this prevents the panel from being seen - even with the padding.
  }