小三角形折叠:如何在网页上创建可折叠部分?
-
13-09-2019 - |
题
有些网页有一个“旋转”三角形控件,可以折叠子菜单。我想要同样的行为,但是对于表单中的部分。
假设我有一张表格,其中包含贷方、姓名、地址和城市信息。我网站的一些用户将需要第二组这些字段。我想为大多数用户隐藏额外的字段。需要额外字段的人应该能够一键访问它们。我该怎么做呢?
解决方案
啊,我想你的意思是你想在你的表单上有可折叠的部分。
简而言之:
- 将要折叠的内容放在自己的DIV中,首先CSS属性为“display:none”
- 将链接(A 标签)包裹在三角形图像(或“隐藏/显示”等文本)周围,运行 JavaScript 来切换显示属性。
- 如果您希望三角形在展开/显示该部分时“转动”,您可以让 JavaScript 同时交换图像。
这是一个更好的解释: 如何使用 Javascript 和 CSS 创建可折叠 DIV [更新2013-01-27 这篇文章在网上已经找不到了,你可以参考一下 此 HTML 页面的来源 受本文启发的应用示例]
或者,如果您用“CSS 折叠部分”之类的词进行 Google 搜索,您会发现许多其他教程,包括超级花哨的教程(例如 http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).
其他提示
使用 JavaScript 隐藏/显示元素的最基本方法是设置元素的可见性属性。
鉴于您的示例,假设您的页面上定义了以下表单:
<form id="form1">
<fieldset id="lenderInfo">
<legend>Primary Lender</legend>
<label for="lenderName">Name</label>
<input id="lenderName" type="text" />
<br />
<label for="lenderAddress">Address</label>
<input id="lenderAddress" type="text" />
</fieldset>
<a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
<fieldset id="secondaryLenderInfo" style="visibility:hidden;">
<legend>Secondary Lender</legend>
<label for="secondaryLenderName">Name</label>
<input id="secondaryLenderName" type="text" />
<br />
<label for="secondaryLenderAddress">Address</label>
<input id="secondaryLenderAddress" type="text" />
</fieldset>
</form>
这里有两点需要注意:
- 第二组输入字段最初使用一些内联 CSS 隐藏。
- “添加贷方”链接正在调用 JavaScript 方法,该方法将为您完成所有工作。当您单击该链接时,它将动态设置该元素的可见性样式,使其显示在屏幕上。
showElement()
需要一个 元素编号 作为参数,看起来像这样:
function showElement(strElem) {
var oElem = document.getElementById(strElem);
oElem.style.visibility = "visible";
return false;
}
几乎所有 JavaScript 方法都会在幕后执行此操作,但我建议使用一个向您隐藏实现细节的框架。看一眼 jQuery, , 和 jQuery 用户界面 为了在隐藏/显示元素时获得更加完美的过渡。
下面是一个简单的CSS只使用一个复选框溶液:
.hideNext:not(:checked)+div {
max-height: 0;
overflow: hidden;
}
<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..
不隶属于 StackOverflow