请问点击一个DIV伸展收缩另一个DIV的有关问题
日期：2014-05-16 浏览次数：20314 次
请教点击一个DIV伸展收缩另一个DIV的问题
类似下面这个网页的DIV伸展收缩功能是怎么做的？请教各位大侠，我对JS不是很了解
http://www.schuetz.net/schuetz/SCH%C3%9CTZ%20China/zh/COMPANY/%E8%81%94%E7%B3%BB%E4%BA%BA/
就是点击联系人或路线，打开另一个DIV的功能
------解决方案--------------------
类似下面这个网页的DIV伸展收缩功能是怎么做的？请教各位大侠，我对JS不是很了解
http://www.schuetz.net/schuetz/SCH%C3%9CTZ%20China/zh/COMPANY/%E8%81%94%E7%B3%BB%E4%BA%BA/
就是点击联系人或路线，打开另一个DIV的功能
------解决方案--------------------
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.head1
{
text-align: center;
font-size: 20px;
height: 30px;
line-height: 30px;
width: 200px;
background-color: Yellow;
cursor: pointer;
}
.head2
{
text-align: left;
font-size: 20px;
height: 30px;
line-height: 30px;
width: 200px;
background-color: Aqua;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#head").toggle(function () {
$(this).removeClass("head1").addClass("head2");
$("#body").slideDown();
}, function () {
$(this).removeClass("head2").addClass("head1");
$("#body").slideUp();
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="head" class="head1">
点击
</div>
<div id="body" style="height: 200px; width: 200px; display: none; background-color: Red;">
</div>
</div>
</form>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
