2016-11-29 83 views
0

我試圖摺疊面板的按鈕id="collapsible"它的工作,然後我需要更改下面的面板類id="gamewindow"以填充整個屏幕,所以使用bootstrap我需要更改colmd -9到col-md-12,這是不工作的部分。更改div類與JS

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

我到底做錯了什麼?

+0

內$包裹你的代碼(文件)。就緒(函數(){});,那麼一切都將工作完全 – Geeky

+0

需要時執行該腳本 –

+0

更多的上下文[檢查此回答](http://stackoverflow.com/a/40874548/5236174) –

回答

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>

0

你已經正確的代碼只是試圖通過準備功能來包裝你的代碼,並添加{}到您的if語句:

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

注:確保$("#xs-check").is(":visible")一定會實現。

希望這會有所幫助。

+0

謝謝你,我用你的代碼,它修復了一個問題,其中col-md會在頁面加載時變爲12,但現在它似乎並沒有改變它,崩潰工作正常,但遊戲窗口不會改變。有任何想法嗎? – Mystic

+0

這是我的按鈕,如果它有幫助 – Mystic