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

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>

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

谢谢，提前。

Codepen 格式错误：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.
  }

Answer 2

对于关闭状态，您必须：

• 给负左 = 宽度 + 填充
• 给定padding = width = 0，然后为.open状态设置padding/width

这是一个代码 sn-p:

function openPanelTableA() {
  document
    .getElementById("mySidePanelTableA")
    .classList.add('open');
}

function closePanelTableA() {
  document
    .getElementById("mySidePanelTableA")
    .classList.remove('open');
}

html, body {
  padding: 0;
}

.sidePanelTableA {
  box-sizing: border-box;
  height: 80%;
  position: fixed; 
  top: 0;
  left: 0;
  background-color: red;
  overflow-x: hidden;


  width: 0;
  padding: 0;
  transition: all ease 0.5s;
}

.sidePanelTableA.open {
  width: 150px;
  padding: 30px;
}

#mysidePanelTableA  {
  padding: 0px 0px 8px 20px;
}

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

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

<button onclick="openPanelTableA()">Open</button>