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>

Answer 2

您有一个正确的代码，只是尝试通过ready函数包装代码并将{}添加到if语句中：

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

注意：确保将实现$("#xs-check").is(":visible")。

希望这有帮助。

用JS改变div类

2 个答案: