作者：郑谊099_448 | 2023-08-31 14:07
好的,我有一组用于选择标准的复选框.为了论证,我们会说数据看起来像这样:
[] Vehicles
[] Unpowered
[] Bicycle
[] Skateboard
[] Powered
[] Two-wheeled
[] Motorcycle
[] Scooter
[] Four-wheeled
etc
[]代表复选框.
忽略这个例子明显做作的本质,这个想法是这样的:
首先,只有"车辆"复选框可见;
如果用户点击"车辆"复选框,则操作上一级(有电,无电);
如果用户选择"动力",则打开下一级(两轮,四轮);
如果用户取消选中"已启动",则该级别将消失.
现在,使用onclick切换block和none之间的显示CSS属性相对容易.
目前在页面上构建如下:
Vehicles
Unpowered
etc
在有人问之前我应该指出:复选框放在表格单元格中的原因是为了控制格式.它使得有效缩进变得容易,因为下一个表格单元格中的所有内容都会排成一行.
一切正常,但表嵌套变得非常深.我一直认为必须有比这更好的方法.它必须能够轻松动态构建,并具有良好的跨浏览器支持格式化"树".
我还应该提一下jQuery是可用的.我正在将它用于其他事情.
建议？
编辑: 是的复选框样式很重要,因为有几条评论已经注意到.另外,我已经根据我得到的回复发布了一个解决方案,作为下面的答案(太大了,不能在这里添加),只是为那些好奇的人看到一个例子.
1> davethegr8..： 编辑:一个小css&js来显示和隐藏嵌套元素(没有复选框)
li.opened ul {
display: block;
}
li.closed ul {
display: none;
}
和js ......
$(document).ready(function() {
$('li input:checkbox').click(function () {
$(this).parent().toggleClass('opened');
$(this).parent().toggleClass('closed');
});
$('li').addClass('closed');
});
再次编辑,因为Sparr想要一些更好的样式(假设复选框的样式为"复选框"
li input.checkbox { /* input:checkbox is not 100% compatible */
width: 6px;
margin: 0 2px;
/* This makes 10px be the total "width" ofh the checkbox */
}
ul {
margin: 0 0 0 10px; /* Or whatever your total checkbox width is */
padding: 0;
}
li {
padding: 0;
}
2> Sampson..： 你可以这样做:
然后,您将UL的填充/边距设置为0和0.然后将LI的填充左侧设置为10px.
ul {
margin:0;
padding:0;
}
li {
margin:0;
padding:0 0 0 20px; /* Each nested li will be padded incrementally */
}
对于javascript,将事件附加到每个复选框,以确定兄弟UL(如果存在)是否应该可见.如果选中该框,则显示该框,否则将其隐藏.
推荐阅读
如何解决《GIT推送错误-重复请求》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《node.js可以排队多少个事件？》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《如何获得火花工作的指标？》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《如何在通过Openpyxl创建的图表中显示数据标签》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《如何使用Ruby2.2.3和rest-client保存文件》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《流程中的集合执行策略》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《如何从HDFS中删除文件？》经验，为你挑选了2个好方法。 ...
[详细]
如何解决《AndroidTalkBack专注于透明层》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《如何将ComboBox的SelectedItem绑定到作为ItemsSource项目副本的对象？》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《如何使用Conda安装MySQLdb？》经验，为你挑选了3个好方法。 ...
[详细]
如何解决《使用pythonjoblib访问和更改全局数组》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《上传到VPP商店灰色》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《页面加载时元素高度的差异》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《如何在Sage中获得给定长度的素数？》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《HTTP/2和CNAME如何协同工作？》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《GoogleCloudDataproc配置问题》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《短绒和验证器有什么区别？》经验，为你挑选了1个好方法。 ...
[详细]
如何解决《Bootstrap4-卡列中的响应卡》经验，为你挑选了2个好方法。 ...
[详细]
如何解决《Vim语法高亮-从模式中排除特定文本》经验，为你挑选了0个好方法。 ...
[详细]
如何解决《Lambda微积分减少步骤》经验，为你挑选了1个好方法。 ...
[详细]
京公网安备 11010802040832号