切换侧栏时通过JQuery更改属性的CSS不起作用_Jquery_Css

切换侧栏时通过JQuery更改属性的CSS不起作用

jquery css

切换侧栏时通过JQuery更改属性的CSS不起作用,jquery,css,Jquery,Css,在我的rails应用程序中，我试图根据边栏是否折叠来更改div的边距。我正在使用JQuery的.css（）方法，但似乎无法使其正常工作以下是我的JS代码片段： document.addEventListener('turbolinks:load', function(){ $('.openbtn').on('click', function() { // This toggles my sidebar $('.collapsed-sidebar').toggleClass(

在我的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

试试这个：

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

试试这个：

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

你可以试试这个长方法：D

在特定类上创建一个样式，如果另一个元素可见，则可以在该div上添加该属性

比如说,

.add-margin-50px{
    margin-right: 50px;
}

如果（$（'.collapped sidebar'）是（“：visible”）{
$（“.signedin”）.addClass（“add-margin-50px”） }

希望这能有所帮助：）

你可以试试这个长方法：D

在特定类上创建一个样式，如果另一个元素可见，则可以在该div上添加该属性

比如说,

.add-margin-50px{
    margin-right: 50px;
}

如果（$（'.collapped sidebar'）是（“：visible”）{
$（“.signedin”）.addClass（“add-margin-50px”） }

希望这能有所帮助：）

我还没有找到

$（'.signedin'）.css（“右边距”，“50px！重要”）的原因不起作用，所以在做了一些挖掘之后，我发现了另一种类似于上面@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


//这是我切换的元素
//这里有侧边栏内容
//这里的uncollapsed类就是被移除和替换的类
//根据侧边栏的状态，可折叠，反之亦然。
我仍然没有找到$（'.signedin'）.css（“右边距”，“50px！重要”）的原因不起作用，所以在做了一些挖掘之后，我发现了另一种类似于上面@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


//这是我切换的元素
//这里有侧边栏内容
//这里的uncollapsed类就是被移除和替换的类
//根据侧边栏的状态，可折叠，反之亦然。
您还需要共享侧边栏的css…@Khan已经编辑了我的问题以包含侧边栏的css。您还需要共享侧边栏的css…@Khan已经编辑了我的问题以包含侧边栏的css。对不起，您所说的“另一种方法”是什么意思？到目前为止，我仍然可以验证对警报的所有函数调用是否正在执行。是否尝试（'.signedin'）。单击（）然后发出警报？如果它有效，我认为你的问题是CSS和HTML，而不是JQueryahh是的，你是对的。因此，基本上，我们现在已经验证了.signedin
类是否正确，但出于某种原因，$（'.signedin'）.css（“右边距”，“50px！重要”）不会更改该类的样式。我会仔细检查我的CSS和HTML。谢谢！对不起，你说的“另一种方法”是什么意思？到目前为止，我仍然可以验证对警报的所有函数调用是否正在执行。是否尝试（'.signedin'）。单击（）然后发出警报？如果它有效，我认为你的问题是CSS和HTML，而不是JQueryahh是的，你是对的。因此，基本上，我们现在已经验证了.signedin
类是否正确，但出于某种原因，$（'.signedin'）.css（“右边距”，“50px！重要”）不会更改该类的样式。我会仔细检查我的CSS和HTML。谢谢！啊,对。我正要回答我的问题，我用了同样的方法！：）啊,对。我正要回答我的问题，我用了同样的方法！：）