Question

对于我正在设计的应用程序，需要如下。我有一个包含2个div的div-wrap，一个在顶部，另一个在底部。要求是当我点击顶部div中的一个链接时，div应该垂直扩展，这样底部的div应该缩小到相当大的数量。同样，当点击底部div中的一个链接时，div应该扩展，这样顶级div大幅下挫。任何人都可以指导我如何处理这个问题吗？

Answer 1

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?

使用javascript扩展和缩小div

1 个答案: