使用jquery摺疊div

Question

我有2 div並排divA和divB。我有一個divB頂部的最大化按鈕。 當我點擊divB上的按鈕時，divB應占據divA的空間並變大，divA應該摺疊。 再次點擊時，應該恢復到正常大小。 如何使用jQuery獲得此功能？

Answer 1

答案是使用jQuery的toggle（）或animate（）函數。 Viraj Nalawade給了你一個如何使用slideToggle和摺疊一個div的好例子。

我給你在這裏的另一個例子，其中包括兩個div，並排：jsfiddle或見摘錄如下：

var original_width=$("#divA").width(); 
 
var max_width=original_width*18/10; 
 
var min_width=original_width*2/10; 
 
var div_status = {}; 
 
$("button").click(function() { 
 
    var parent = $(this).parent(); 
 
    var sibling = $(parent).siblings(); 
 
    var parent_id = $(parent).attr("id"); 
 
    var sibling_id = $(sibling).attr("id"); 
 

 
    if (div_status[parent_id]) { 
 
     div_status[parent_id] = false; 
 
    } else { 
 
     div_status[parent_id] = true; 
 
     div_status[sibling_id] = false; 
 
    } 
 
    
 
    if (div_status[parent_id]) { 
 
     $(parent).animate({ 
 
      width: max_width+"px" 
 
     }); 
 
     $(sibling).animate({ 
 
      width: min_width+"px" 
 
     }); 
 
    } else { 
 
     $(parent).animate({ 
 
      width: original_width+"px" 
 
     }); 
 
     $(sibling).animate({ 
 
      width: original_width+"px" 
 
     }); 
 
    } 
 
});

#container { 
 
    width:500px; 
 
    float:left; 
 
} 
 
div.mobile { 
 
    float:left; 
 
    width:50%; 
 
    height:200px;  
 
} 
 
#divA { 
 
    background-color:red; 
 
} 
 
#divB { 
 
    background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="divA" class="mobile"> 
 
     <button>divA</button> 
 
    </div> 
 
    <div id="divB" class="mobile"> 
 
     <button>divB</button> 
 
    </div> 
 
</div>