使用javascript扩展和收缩div
对于我正在设计的应用程序，需要满足以下要求。我有一个div包装器，它包含两个div，一个在顶部，另一个在底部。要求是，当我单击顶部div中的链接时，div应该垂直扩展，以便底部div收缩到相当大的数量。类似地，当单击底部div中的链接时，div应该扩展，以便顶部div收缩到相当大的数量。有谁能指导我如何处理这个问题吗？使用javascript扩展和收缩div,javascript,Javascript,对于我正在设计的应用程序，需要满足以下要求。我有一个div包装器，它包含两个div，一个在顶部，另一个在底部。要求是，当我单击顶部div中的链接时，div应该垂直扩展，以便底部div收缩到相当大的数量。类似地，当单击底部div中的链接时，div应该扩展，以便顶部div收缩到相当大的数量。有谁能指导我如何处理这个问题吗？我的示例html代码如下：， My sample html code is as follows, <html> <head> <link rel="
我的示例html代码如下：，
My sample html code is as follows,
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="myscript.js"></script>
</head>
<body>
<div class="class1">
<a href="#" onclick="toggleClass(this);">more</a>
</div>
<div class="class2">
<a href="#" onclick="toggleClass(this);">more</a>
</div>
</body>
</html>
The CSS:
.class1
{
width:300px;
height:300px;
background-color:red;
}
.class2
{
width:300px;
height:300px;
background-color:blue;
}
.class3
{
width:300px;
height:600px;
background-color:red;
}
.class4
{
width:300px;
height:600px;
background-color:blue;
}
The JS code: Just toggle if it is class 1 or class 2
function toggleClass(el){
if(el.className == "class1"){
el.className = "class3";
} else {
el.className = "class4";
}
}
The toggle effect is not happening. Could people please guide me where im going wrong?
CSS：
.1级
{
宽度：300px；
高度：300px；
背景色：红色；
}
.2级
{
宽度：300px；
高度：300px；
背景颜色：蓝色；
}
.3级
{
宽度：300px；
高度：600px；
背景色：红色；
}
.4级
{
宽度：300px；
高度：600px；
背景颜色：蓝色；
}
JS代码：只要切换它是类1还是类2
函数切换类（el）{
如果（el.className==“class1”）{
el.className=“class3”；
}否则{
el.className=“class4”；
}
}
切换效果没有发生。人们能告诉我哪里出了问题吗？