javascript - Jquery .css 第一次调用时不工作

Question

我有一个全屏类，它(显然)使任何面板都被添加到全屏。 scss 如下:

.fullscreen-div {
  top: $navbar_height;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 5;
  padding: 0px 10px;
  background: white;
}

每当打开其他特定面板时，我希望全屏小一点，以便其他面板也能适应。我尝试使用以下 javascript 执行此操作:

function setWindowDimensions(){
    ...
    //Fullscreen width
    var fullscreen = $('.fullscreen-div');
    if(leftPanelPresence){
        fullscreen.css("left", leftPanelWidth);
    }else{
        fullscreen.css("left", 0);
    }
}

此代码在左侧面板可见时正确运行，但是“左”样式属性全屏 div 仅在我运行此代码两次时发生变化。第一次它只是保持默认 left: 0; .

我检查了 jQuery 元素是否被正确选择，id leftPanelPresence 是否为真以及 leftPanelWidth 是否设置正确，一切似乎都是如此。

全屏按钮执行以下操作(coffeescript):

$(document).on 'click', '.evidence-header h4 i.icon-resize-full', ->
    evidenceView.addClass('fullscreen-div')
    setWindowDimensions()

leftPanelWidth 默认设置为 200。

.css jQuery 行已运行，但我只是没有看到浏览器中反射(reflect)的更改。当我在浏览器中检查 css 时，它保持为 0。

Answer 1

.css 的参数必须是一个字符串，就像你在.css 文件中写的那样

您需要在 leftPanelWidth 末尾添加“px”。

它与您的默认值一起工作，因为 0 被解释为空值并且在没有“px”的情况下工作