Question

我已经在我的网站上实现了一个滑出div，它位于页面的左侧。可以单击一个小手柄来拉动拉环。

目前，CSS如下所示设置为500px宽度。我想要250px的宽度。

.panel {
  width:500px;
  min-height:175px;
  padding:40px;
  position:fixed;
  left:-580px;
  top:29.5%;
  z-index:1;
  background:#4d5290;
  -webkit-border-radius: 0px 0px 25px 0px;
border-radius: 0px 0px 25px 0px;
}

  .panel .trigger {
    width:36px;
    text-align:center;
    color:#fff;
    position:absolute;
    top:0;
    right:-36px;
  }

我将宽度减半到250px然后假设我可以将left:-580px值减半以获得我想要的结果。

然而，滑出标签向外滑动就好了，但是当您再次单击手柄以隐藏标签时，它会将原始的580px飞回页面（这意味着您无法查看或取回它。）< / p>

我试图让它在JS Fiddle中工作，但我正在努力，因为JS文件在js小提琴中不会正常工作......正在努力。与此同时，所需的一切都可以在以下网址看到：

The page/live site The JS linked file

希望有人可以帮助我解决它正在做的事情。或者公式对于数字之间的差异是什么？

Answer 1

.panel {
    width: 250px;
    min-height: 175px;
    padding: 40px;
    position: fixed;
    left: -330px; //you have 40px of padding, we need to add that to this calculation.
    top: 29.5%;
    z-index: 1;
    background: #4D5290;
    border-radius: 0px 0px 0px 25px;
}

jQuery更改......

$(settings.objSlidePanel).animate({
    'left' : '-330px'
});

Your code live in action -- click here

修改

您也很可能遇到标记问题，当我从您的网站上复制它时，您的img标记呈现为<img src="blahblahblah.ext" <=" div=""/>。这可能会导致您在其他地方遇到问题，可能不会使用此代码。

同时检查您是否已将style="left:-580px"硬编码到其自身的<div>。

滑出选项卡向后飞得太远（页面外）

1 个答案: