Question

在我的rails应用程序中，我试图根据侧边栏是否折叠来更改div的边距。我正在使用JQuery的.css()方法，但似乎无法使其工作。

这是我的JS代码段：

document.addEventListener('turbolinks:load', function(){
  $('.openbtn').on('click', function() {
    // This toggles my sidebar
    $('.collapsed-sidebar').toggleClass('displaynone');

    // Checks if the sidebar is collapsed
    if($('.collapsed-sidebar').is(":visible")){

      // So far I have verified that it triggers this alert
      // when I collapse my sidebar
      alert("collapsed sidebar is visible");

      // Class that I am trying to change the CSS Property
      $('.signedin').css({
        'margin-right': '50px !important'
      });
    }

  });
});

这是我的HTML结构：

<body>
    <div class="ui sidebar vertical left menu visible very thin icon">
        <div class="collapsed-sidebar displaynone"> // This is the element that I toggle
             // Sidebar content here
        </div>
    </div>
    <div class="pusher">
        <div class="row content">
            <div class="signedin"> // Element that I am trying to change the property
            </div>
        </div>
    </div>
</body

这是我的侧边栏的CSS：

.displaynone {
  display: none !important;
}

.ui.sidebar.vertical.menu {
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

Answer 1

尝试一下：

$('.signedin').css("margin-right","50px !important");

Answer 2

您可以尝试这种长方法：D

在特定的类上创建样式，如果其他元素可见，则可以在该div上添加属性。

例如

id

if（$（'。collapsed-sidebar'）。is（“：visible”））{
$（“。signedin”）。addClass（“ add-margin-50px”） }

希望这会有所帮助：）

Answer 3

我仍然没有找到$('.signedin').css("margin-right","50px !important");无法正常工作的原因，因此，在进行了一些挖掘之后，我发现了另一种类似于上述@emjr答案的方法。这种方法利用了JQuery的addClass()和removeClass()。

因此，在我的CSS中，我添加了自定义样式，以在边栏折叠或不折叠时增加/减少边距。

.signedin {
  margin-top: 50px;
  margin-left: 50px;
  &.collapsed {
    margin-right: 100px !important;
  }
  &.uncollapsed {
    margin-right: 300px !important;
  }
}

然后在我的JS中：

document.addEventListener('turbolinks:load', function(){
  $('.openbtn').on('click', function() {
    $('.ui.sidebar').toggleClass('very thin icon');
    $('.collapsed-sidebar').toggleClass('displaynone');

    if($('.collapsed-sidebar').is(":visible")){
      $('.signedin').addClass('collapsed').removeClass('uncollapsed');
    }else{
      $('.signedin').addClass('uncollapsed').removeClass('collapsed');
    }
  });
});

然后在我的HTML中：

<body>
    <div class="ui sidebar vertical left menu visible very thin icon">
        <div class="collapsed-sidebar displaynone"> // This is the element that I toggle
             // Sidebar content here
        </div>
    </div>
    <div class="pusher">
        <div class="row content">
            <div class="signedin uncollapsed">
                // The uncollapsed class here is what is being removed and replaced
                //by collapsed and vice-versa depending on the state of the sidebar.
            </div>
        </div>
    </div>
</body

所以发生的事情是，当我切换侧边栏时，它会添加/删除折叠/未折叠的类。

如果有人能弄清楚.css()方法为何行不通，并能为我指出正确的方向，我仍将不胜感激。

在切换边栏时无法通过JQuery更改属性的CSS

3 个答案: