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应用于面板。 / p>

此外-与通过javascript直接将CSS添加到元素相比，添加/删除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

这是一个代码段：

@PathParam

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

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

2 个答案: