JavaScript - 折叠Div

Question

我想要崩溃我的div我还能看到的地方。但是，其内容已折叠，当您将鼠标悬停在其上时，它将以正常大小显示，其内容可见。

我不完全确定如何解决这个问题，但我已经开始尝试直接通过id或class来改变div的大小，但还没有成功完成任何事情。

我下面有一些姐妹div作为子菜单。我可以使用相同的#divID在CSS中更改它们的大小，但是它并没有改变我的第一个。我只需要第一个崩溃了。它基本上是一个菜单，我使用输入CSS hack来显示div

样式div是我想要崩溃的那个。 到目前为止我的代码：

var collapse = document.getElementById("styles");
collapse.setAttribute("style", "height:5px");

<input type="radio" name="UItab" id="tabf">
<label for="tabf"><a href="index.php?page=styles"><span>Styles</span></a>
</label>
<div>
  <div id="styles">
    <ul class="sub-menu">
      <a href="index.php?page=sAdminNew">
        <li>New Style</li>
      </a>
      <a href="index.php?page=sAdminExist" onclick="toggle('togglebox');">
        <li>Existing Styles</li>
      </a>
      <a href="index.php?page=sAdminAssign">
        <li>Style Assignments</li>
      </a>
    </ul>
  </div>
</div>

	input + label {
	color: #FFFFFF;
	display: inline-block;
	padding: 6px 8px 10px 24px;
	height: 8px;
	margin:0;
	line-height: 12px;
	position:relative;
}

input + label + div{
	margin:0;
	margin-top:2px;
	padding: 16px;
	border: 1px solid;
	width: 100%;
	height: auto;
	position: absolute;
	top: 20px;
	display: none;
	
}
	
input:checked + label + div { 
	display:block;	
	
	}
/*CSS for submenu container  */
 .menu input + label + div {
	position: absolute;
	right:0;
	background-image: url('../images/submenu-background.png');
	text-align: center;
	width: 100%;
	margin: 0 auto;	
}
	
.menu input + label + div > div {
	z-index:1000;
	position:absolute; 
	top:0; left:0; right:0; bottom:0;	
	padding:16px;
	padding-top:5px;
	
}	

Answer 1

如果你要做的就是改变可见性，你可以通过使用CSS而不是JS来获得更可靠的解决方案，因为Javascript因各种原因而无法使用。

#styles{
    height:5px;
    overflow:hidden;
}

#styles:hover{
    height:auto;
} 

通过这些简单的样式声明，您将看到它展开/折叠。但是，如果你正在寻找动画，它是一个更复杂的解决方案。

如果处于折叠状态，您希望它只显示第一行文本（因此您可以使用“标签”或其他内容），使用“ems”代替“px”可能更聪明：

#styles{
    height:1em;
    overflow:hidden;
}

这里，1em =一行文字的高度。