可調整大小的動態引導列

我有兩列（其中一個可以隱藏），並嘗試調整第二列的大小，當第一列隱藏時。可調整大小的動態引導列

<div class="row"> 
    <div class="col-sm-3 col-lg-2 ms-dialogHidden"> 
     content1 
    </div> 
    <div class="col-sm-9 col-lg-10"> 
     content2 
    </div> 
</div>

當我隱藏第一，我想調整的第二個這樣的：

<div class="row"> 
    <div class="col-sm-3 col-lg-2 ms-dialogHidden"> 
     content1 
    </div> 
    <div class="col-sm-12 col-lg-12"> 
     content2 
    </div> 
</div>

誰能幫助我？

謝謝！

來源

2015-06-11 Plumpssack

只需使用.toggleClass()類之間的交換，假設你有一個按鈕，顯示/隱藏左邊欄：

$('#hideLeft').click(function() { 
    $('#left').toggleClass('col-sm-0 col-sm-3'); 
    $('#right').toggleClass('col-sm-9 col-sm-12'); 
});

這說明你如何做到這一點，甚至有做動畫（我使用類col-xs-*，因爲小提琴窗口的大小更小：https://jsfiddle.net/DTcHh/8789/

來源

2015-06-11 12:01:02 EmirCalabuch

感謝您的回覆！問題是，即時通訊在主頁面中使用它，以便如果我打開一個Popup（使用相同的母版頁）左欄消失了彈出式內容佔據整個空間。這意味着我不能使用按鈕在類之間切換。 – Plumpssack

該按鈕僅供演示，您可以隨時更改類，例如打開彈出窗口時。這個派生的例子只將類改爲位於另一個div下面的左邊和右邊的div，使用'modal-frame'類，而另一個不改變，JavaScript在頁面加載時執行：https：//jsfiddle.net/a676s1g0/2/ – EmirCalabuch

我想這應該這樣做：

<div class="row"> 
    <div id="first" class="col-sm-3 col-lg-2 ms-dialogHidden"> 
     content1 
    </div> 
    <div id="second" class="col-sm-12 col-lg-12"> 
     content2 
    </div> 
</div>

和jQuery來處理的HTML。

if($("#first").hasClass(ms-dialogHidden)){ 
    $("#second").removeClass().end().addClass("col-sm-12 col-lg-12") 
}

來源

2015-06-11 11:46:42 cs04iz1

可調整大小的動態引導列

回答

相關問題