javascript - 用JS改变div类

Question

我正在尝试使用有效的按钮 id="collapsible" 折叠面板，然后我需要更改下面的面板的类 id="gamewindow" > 要填充整个屏幕，因此使用 bootstrap 我需要将 col-md-9 更改为 col-md-12，这是不起作用的部分。

我的html:

<div class="collapse in" id="collapsible">
....
</div>
<div id="gamewindow" class="col-md-9">
....
</div>

我的JS:

if( $("#xs-check").is(":visible") )
    $("#collapsible").removeClass("in");
    $("#gamewindow").removeClass("col-md-9");
    $("#gamewindow").addClass("col-md-12");

我的按钮

<button class="btn btn-link" data-toggle="collapse" data-target="#collapsible">Toggle Stats</button>

我做错了什么？

Answer 1

将该 JavaScript 代码放入 jQuery 文档就绪函数中，如下所示。

然后而不是删除和添加类。使用toggleClass。我使用 col-xs 因为这里的输出屏幕较小。

$( document ).ready(function() {
    //Put your code here that you want to execute on load    

   if( $("#xs-check").is(":visible") ) {
       $("#collapsible").removeClass("in");
       //Remove: $("#gamewindow").removeClass("col-md-9");
       //Remove: $("#gamewindow").addClass("col-md-12");
       $("#gamewindow").toggleClass("col-xs-12 col-xs-9");
    }

});

下面是如何切换 9 和 12 类的工作示例。我不确定您到底想要什么，但您可以从这个工作示例中获得想法。

//Change ID as per your requirements 

$( "#btn_ID" ).click(function() {  
   $("#gamewindow").toggleClass("col-xs-12 col-xs-9");
});

#gamewindow, #collapsible {
  border: 1px solid black
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button id="btn_ID" class="btn btn-link" data-toggle="collapse" data-target="#collapsible">Toggle Stats</button>

<br />

<div class="collapse in" id="collapsible">
    Collapsible
</div>

<div id="gamewindow" class="col-xs-12">
    <p>
      Content  
    </p>
</div>