使用jquery,在点击的收缩时候向下收缩,然后第一个global_module高度加上收缩的高度,使之铺满整个窗口。
<div id="leftTree">
<div class="global_module">
<h3>对象显示区</h3>
<div>
</div>
</div>
<div class="global_module">
<h3>快速查找<a href="#">高级查询</a></h3>
<div>
<div>
<table>
<tr>
<td><a href="#" target="_blank">地址</a></td>
<td><input id="devAddr" size="8"/></td>
<td><a href="#" onclick="query(0)" class="jqModal">查询</a></td>
</tr>
<tr>
<td>名称</td>
<td><input id="cpName" size="8"/></td>
<td><a href="#" onclick="query(1)" class="jqModal">查询</a></td>
</tr>
</table>
</div>
<div class="jqmWindow" id="query_table">
</div>
</div>
<p class="module_up_down">
<img alt="收缩" src="images/select.jpg"/>
</p>
</div>
<div class="global_module">
<h3>统计信息<a href="#">详细</a></h3>
<div>
文字部分<br/>
文字部分<br/>
文字部分<br/>
</div>
<p class="module_up_down">
<img alt="收缩" src="images/select.jpg"/>
</p>
</div>
</div>
<div id="leftTree">
<div class="global_module">
<h3>对象显示区</h3>
<div>
</div>
</div>
<div class="global_module">
<h3>快速查找<a href="#">高级查询</a></h3>
<div>
<div>
<table>
<tr>
<td><a href="#" target="_blank">地址</a></td>
<td><input id="devAddr" size="8"/></td>
<td><a href="#" onclick="query(0)" class="jqModal">查询</a></td>
</tr>
<tr>
<td>名称</td>
<td><input id="cpName" size="8"/></td>
<td><a href="#" onclick="query(1)" class="jqModal">查询</a></td>
</tr>
</table>
</div>
<div class="jqmWindow" id="query_table">
</div>
</div>
<p class="module_up_down">
<img alt="收缩" src="images/select.jpg"/>
</p>
</div>
<div class="global_module">
<h3>统计信息<a href="#">详细</a></h3>
<div>
文字部分<br/>
文字部分<br/>
文字部分<br/>
</div>
<p class="module_up_down">
<img alt="收缩" src="images/select.jpg"/>
</p>
</div>
</div>
解决方案 »
- 求教关于javascript获取动态表格数据的问题,如何获取动态ID
- 如何在被引用的JS文件里 获得当前JSP页面的元素的ID
- js控制select下拉菜单无法显示
- [求助]select的问题
- 怎么样对String进行降序排序
- var ll=new Array(1,2,3);alert(ll.ubound());为什么这样会错?怎样得到其最大边界值?急急!!谢谢
- jq-mobile为什么用本机ip访问就不正常显示了
- 求教一个简单数组循环求数值的问题,当文本框的值等与数组1的值得时候....
- 问题,关于表
- 刷新页面时,如何避免确认框出现?
- json简单问题 帮忙
- 求助,JavaScript的加密算法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
$("img").toggle(function(){
$(this).parent().prev().hide();
},function(){
$(this).parent().prev().show();
});
});
</script></head><body>
<div id="leftTree">
<div class="global_module">
<h3>对象显示区</h3>
<div>
</div>
</div>
<div class="global_module">
<h3>快速查找<a href="#">高级查询</a></h3>
<div>
<div>
<table>
<tr>
<td><a href="#" target="_blank">地址</a></td>
<td><input id="devAddr" size="8"/></td>
<td><a href="#" onclick="query(0)" class="jqModal">查询</a></td>
</tr>
<tr>
<td>名称</td>
<td><input id="cpName" size="8"/></td>
<td><a href="#" onclick="query(1)" class="jqModal">查询</a></td>
</tr>
</table>
</div>
<div class="jqmWindow" id="query_table">
</div>
</div>
<p class="module_up_down">
<img alt="收缩" src="1.png"/>
</p>
</div>
<div class="global_module">
<h3>统计信息<a href="#">详细</a></h3>
<div>
文字部分<br/>
文字部分<br/>
文字部分<br/>
</div>
<p class="module_up_down">
<img alt="收缩" src="1.png"/>
</p>
</div>
</div>
</body>
</html>
是这种吗
回复3楼,很感谢你的帮忙,这个效果我实际上已经实现。只是希望下面两个.global_module底部靠齐,收缩的时候收缩到底部,而不是向上收缩,收缩的同时第一个.global_module的高度改变,填充到下面两个global_module减小的空间。