按鈕點擊自舉翻轉列

我試圖找出一些我認爲應該相當容易的東西。我這裏所示的基本引導佈局：按鈕點擊自舉翻轉列

<div class="row"> 
     <div class="col-md-6" id="tallyForm"> 
      some content on left side 
      <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <button class="btn btn-default" id="flipForm">Flip Form</button> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-6" id="studentImage"> 
      image loaded here... 
     </div> 
    </div>

我只是想按鈕翻轉tallyForm和studentImage的div，左到右，然後再次單擊並退回到正常。我在我的項目中有jquery，所以我假設我在按鈕上附加了一個單擊事件，並使用push或pull類執行某些操作。

來源

2017-02-23 dmikester1

儘管解決方案，即重新加載所有的HTML，你可以用引導的方式來推動和拉動的列。

只需切換產生效果的類即可。工作示例：http://www.bootply.com/JzaVGZORKy

$('#flipForm').click(function(e) { 
    $('#studentImage').toggleClass('col-md-pull-6') 
    $('#tallyForm').toggleClass('col-md-push-6') 
})

來源

2017-02-23 16:10:58 xtiancastro7

我標記了這個答案，因爲這更接近我所尋找的。謝謝！ – dmikester1

我剛剛儲存了一個div的.html()的內容，然後交換了它們。必須將按鈕移出自己的行，否則它也會移動。

JQuery的

$('#flipForm').click(function(){ 
    var temp = $('#tallyForm').html(); 
    $('#tallyForm').html($('#studentImage').html()); 
    $('#studentImage').html(temp); 
});

HTML

<div class="row"> 
    <div class="col-md-6" id="tallyForm">some content on left side</div> 
    <div class="col-md-6" id="studentImage">image loaded here...</div> 
</div> 
<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
     <button class="btn btn-default" id="flipForm">Flip Form</button> 
    </div> 
</div>

bootply

來源

2017-02-23 15:51:00

稍微比我想要的hacky，但它伎倆。當我將按鈕保留在左側div中時，第一次點擊後失去了功能。所以我就像你所建議的那樣把它拿出來。謝謝！ – dmikester1

按鈕點擊自舉翻轉列

回答

相關問題