使用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>