如何更改bootstrap onClick中容器div的宽度？

Question

我正在研究Asp.Net MVC项目。 在我的_Layout.cshtml中，我使用容器类作为我的主容器div：

    <div class="container">
        @RenderBody()
        <hr />
        <footer>
        </footer>
    </div>

然而，对于我的一个页面，我有一个按钮，允许将容器的大小扩展到全屏宽度和背面（用户可以将宽度从默认切换到全屏宽度，反之亦然）。 / p>

容器 - 流体类的做法也是如此，但我需要在按钮点击时即时进行。我怎样才能做到这一点？此外，有没有办法只更改特定视图的宽度而不影响其他页面（因为容器在_layout.cshtml中定义，它也会影响其他视图）？

Answer 1

对于所有容器：

$("#myButton").on('click', function(){
    $(".container").toggleClass("container-fluid");
});

仅对按钮的父.container点击

$("#myButton").on('click', function(){
    $(this).closest(".container").toggleClass("container-fluid");
});

如果要将其设置为提供的引导类之外的特定样式，则可以将container-fluid替换为您选择的类。

Answer 2

在做了一些实验后，我发现以下代码对我来说效果很好：

document.getElementById("elementId").className = "new_css_class_name";

它会立即强制文档更新视图，这在上述解决方案的情况下会出现问题。