求助JQUERY向下收缩

hizhengfu 2010-05-08 08:12:55

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

...全文

163 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

vnetcbd 2010-05-08

打赏
举报

？？？

用那么多没用的 div 标签干嘛？？？

hizhengfu 2010-05-08

打赏
举报

谢谢各位，我使用http://layout.jquery-dev.net/documentation.cfm#Auto-Generated_IDs这个插件来搞定相关问题吧

hizhengfu 2010-05-08

打赏
举报

回复2楼，没用的标签实际上是有用的，程序会操作相关div。
回复3楼，很感谢你的帮忙，这个效果我实际上已经实现。只是希望下面两个.global_module底部靠齐，收缩的时候收缩到底部，而不是向上收缩，收缩的同时第一个.global_module的高度改变，填充到下面两个global_module减小的空间。

passself 2010-05-08

打赏
举报



<!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>