Question

＆＃13;

function expand(){
currentvalue = document.getElementById("test").value;
if(currentvalue == "off"){
	document.getElementById("test").value="on";
	document.getElementById("test").style.height="100px";
   			
	var div = document.getElementById("test");
	var content = document.getElementById("test3");
   			
	div.innerHTML = div.innerHTML + content.innerHTML;
}
else{
	document.getElementById("test").value="off";
	document.getElementById("test").style.height="20px";
  			
	var div = document.getElementById("test").innerHTML = "<div id='test2'><b>Div</b></div>";
   			
}
}

＆＃13;

<!doctype html>
<html>
<head>
<style>
	#test{
		position: absolute; 
		border-radius: 4px;
		background: #CCCC00;
		height: 20px;
		width: 300px;
		border: 1px solid #000000;
	}
	#test2{
		text-align: center;
		font-size: 12pt;
	}	
</style>
</head>
<body>
<a href="#" onClick="javascript:expand()" value="on">
   	<div id="test">
   			<div id="test2"><b>Div</b></div>
 			<div id="test3" style="display: none;">I want this to show up in my div!</div>
</div>
</a>
</body>
</html>

＆＃13;

我试图创建一个可扩展的div容器，它会在其中显示一些文本打开时，然后在关闭时隐藏它。我设法使div扩展和关闭但是我无法弄清楚如何使文本显示在展开的框中。我可以通过在javascript中插入文本来实现它，但我希望将其设置为变量，这样我就可以将该脚本用于div中不同文本的多个页面。

我不知道我是否以正确的方式接近它，并希望提前得到一些帮助。

Answer 1

要显示文字，只需将包含文字的div的样式更改为display: block：

document.getElementById("test3").style.display = "block";

根据您的要求，它将是这样的：

function expand() {
    if (currentValue == "off") {
        currentValue = "on";
        document.getElementById("test").style.height = "100px";
        document.getElementById("test3").style.display = "block";
    }
    else {
        currentValue = "off";
        document.getElementById("test").style.height=  "20px";
        document.getElementById("test3").style.display = "none";
    }
}

Here你有一个工作小提琴。

使用onClick将文本放在扩展div中

1 个答案: