springboot怎么把数据传给前端:springboot 如何引入前端 bootstrap？
这种问题网上一搜一大堆，你可以具体找一篇文章试试，遇到问题可以针对相关问题去提问。springboot通过jar包方式引入bootstrap_个人文章 - SegmentFault 思否 这不是查查就
JavaScript-HTML代码实现可折叠节-堆栈溢出
顺晟科技
2022-10-19 13:50:06
145
我有一个popup.html文件，它向用户展示了一系列复选框。有主要的部分，我想创建展开/折叠部分。我是一个新手网络开发人员谁知道足够危险。我花了过去10个小时的大部分时间试图修改我的代码来解决这个问题。我失败了。我需要一些帮助。
以下是我当前的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}
</style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
<div>
<input type="checkbox" id="g1" value="g1">
<label for="g1">G1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc" value="g1-oc">
<label for="g1-oc">G1 OC</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
<label for="g1-oc-x1">G1 OC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
<label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
<label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
<label for="g1-oc-x2">G1 OC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
<label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
<label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
</div>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc" value="g1-uc">
<label for="g1-uc">G1 UC</label><br>
<div class="indent">
<div>
<input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
<label for="g1-uc-x1">G1 UC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
<label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
<label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
</div>
</div>
<div>
<input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
<label for="g1-uc-x2">G1 UC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
<label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
<label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
此代码将导致以下结果:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}
</style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
<div>
<input type="checkbox" id="g1" value="g1">
<label for="g1">G1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc" value="g1-oc">
<label for="g1-oc">G1 OC</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
<label for="g1-oc-x1">G1 OC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
<label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
<label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
<label for="g1-oc-x2">G1 OC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
<label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
<label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
</div>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc" value="g1-uc">
<label for="g1-uc">G1 UC</label><br>
<div class="indent">
<div>
<input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
<label for="g1-uc-x1">G1 UC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
<label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
<label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
</div>
</div>
<div>
<input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
<label for="g1-uc-x2">G1 UC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
<label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
<label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
我试图完成的是编写代码，它将显示用户折叠的节，如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}
</style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
<div>
<input type="checkbox" id="g1" value="g1">
<label for="g1">G1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc" value="g1-oc">
<label for="g1-oc">G1 OC</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
<label for="g1-oc-x1">G1 OC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
<label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
<label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
<label for="g1-oc-x2">G1 OC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
<label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
<label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
</div>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc" value="g1-uc">
<label for="g1-uc">G1 UC</label><br>
<div class="indent">
<div>
<input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
<label for="g1-uc-x1">G1 UC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
<label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
<label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
</div>
</div>
<div>
<input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
<label for="g1-uc-x2">G1 UC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
<label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
<label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
当用户展开G1时，他们将看到:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}
</style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
<div>
<input type="checkbox" id="g1" value="g1">
<label for="g1">G1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc" value="g1-oc">
<label for="g1-oc">G1 OC</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
<label for="g1-oc-x1">G1 OC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
<label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
<label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
<label for="g1-oc-x2">G1 OC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
<label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
<label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
</div>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc" value="g1-uc">
<label for="g1-uc">G1 UC</label><br>
<div class="indent">
<div>
<input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
<label for="g1-uc-x1">G1 UC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
<label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
<label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
</div>
</div>
<div>
<input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
<label for="g1-uc-x2">G1 UC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
<label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
<label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
如果用户将展开G1 OC，他们将看到
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}
</style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
<div>
<input type="checkbox" id="g1" value="g1">
<label for="g1">G1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc" value="g1-oc">
<label for="g1-oc">G1 OC</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
<label for="g1-oc-x1">G1 OC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
<label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
<label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
<label for="g1-oc-x2">G1 OC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
<label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
<label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
</div>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc" value="g1-uc">
<label for="g1-uc">G1 UC</label><br>
<div class="indent">
<div>
<input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
<label for="g1-uc-x1">G1 UC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
<label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
<label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
</div>
</div>
<div>
<input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
<label for="g1-uc-x2">G1 UC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
<label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
<label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
如果用户展开G1 OC X1，他们将看到
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}
</style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
<div>
<input type="checkbox" id="g1" value="g1">
<label for="g1">G1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc" value="g1-oc">
<label for="g1-oc">G1 OC</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
<label for="g1-oc-x1">G1 OC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
<label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
<label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
<label for="g1-oc-x2">G1 OC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
<label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
<label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
</div>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc" value="g1-uc">
<label for="g1-uc">G1 UC</label><br>
<div class="indent">
<div>
<input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
<label for="g1-uc-x1">G1 UC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
<label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
<label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
</div>
</div>
<div>
<input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
<label for="g1-uc-x2">G1 UC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
<label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
<label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
等等。显然，功能必须扩展和折叠部分。现在，我不需要花哨的插入符号、箭头等。我可以在每个复选框前面加上一个简单的“+”和“-”。
理想情况下，代码是自包含的，无需引用外部资源。
如果能得到任何帮助，我将不胜感激。地狱，如果有人可以简单地使其中一个扩展/折叠工作，我相信我可以修改其余的代码，以类似的方式工作。提前感谢您提供的任何帮助。
顺晟科技：
@any2cards听起来您在寻找the element。所有主要浏览器都支持，不需要额外代码。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.top {
width: 250px;
}
div.indent {
margin-left: 20px;
}
</style>
</head>
<body>
<p>Select Games / Expansions / Assets:</p>
<div class="top">
<div>
<input type="checkbox" id="g1" value="g1">
<label for="g1">G1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc" value="g1-oc">
<label for="g1-oc">G1 OC</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1" value="g1-oc-x1">
<label for="g1-oc-x1">G1 OC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a1" value="g1-oc-x1-a1">
<label for="g1-oc-x1-a1">G1 OC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x1-a2" value="g1-oc-x1-a2">
<label for="g1-oc-x1-a2">G1 OC X1 A2</label><br>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2" value="g1-oc-x2">
<label for="g1-oc-x2">G1 OC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a1" value="g1-oc-x2-a1">
<label for="g1-oc-x2-a1">G1 OC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-oc-x2-a2" value="g1-oc-x2-a2">
<label for="g1-oc-x2-a2">G1 OC X2 A2</label><br>
</div>
</div>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc" value="g1-uc">
<label for="g1-uc">G1 UC</label><br>
<div class="indent">
<div>
<input type="checkbox" id="g1-uc-x1" value="g1-uc-x1">
<label for="g1-uc-x1">G1 UC X1</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a1" value="g1-uc-x1-a1">
<label for="g1-uc-x1-a1">G1 UC X1 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x1-a2" value="g1-us-c1-a2">
<label for="g1-us-c1-a2">G1 UC X1 A2</label><br>
</div>
</div>
<div>
<input type="checkbox" id="g1-uc-x2" value="g1-uc-x2">
<label for="g1-uc-x2">G1 UC X2</label><br>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a1" value="g1-uc-x2-a1">
<label for="g1-uc-x2-a1">G1 UC X2 A1</label><br>
</div>
<div class="indent">
<input type="checkbox" id="g1-uc-x2-a2" value="g1-uc-x2-a2">
<label for="g1-uc-x2-a2">G1 UC X2 A2</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
制作了一个REPL（交互式代码thingymajig)，您可以在其中尝试我将在这里向您解释的解决方案（以及注释）:https://replit.com/@heyitsmarcus/collapsing-entrients-css
首先，我不得不用你复制粘贴的东西中的“oc”替换“uc”结构，因为“uc”结构被破坏了。它仍然表示UC，因为我刚刚用UC替换了OC引用。
我添加到HTML中的一件事是每个复选框中的expando-controller类，它负责展开元素。我选择expando-controller是因为我喜欢它，但是您可以选择您喜欢的任何东西（只需更改HTML类和相关的CSS文件）。
- TAG：
相关文章
-
05
2022-12
-
02
2022-12
-
02
2022-12
-
29
2022-11
-
29
2022-11
-
24
2022-11
推荐阅读
随机推荐
- Html 实现动态显示颜色块的报表效果
- HTML的头部有什么元素
- del标签是块级元素吗？
- Web storage存储基础知识
- el-Dropdown 下拉框不显示，显示的内容为空
- 如何解决错误类型错误：无法设置只有getter的#<htmlinputelement>的属性列表？
- 简化Web开发的12个HTML5-CSS框架
- 主题:最新HTML摘要PPT讲座共享信息
- Java爬虫工具HTML解析工具-Jsoup
- Vue、elementui、bootstrap、react等等这些有啥区别?
- 个人永久免费-Excel Catalyst Function Wave 115字 pdf Excel ppt html等文档互相传递
- 原文链接：https://www.cnblogs.com/baby123/p/6477429.html
- 从零开始学习html(10)——下的CSS格式和排版
- 前端开发HTMLCSS入门——具体干什么？
- HTML-根据jQuery中的用户输入添加额外的DIV输入-堆栈溢出
- JavaScript-HTML上的照片旋转-堆栈溢出
- HTML-将EJS对象从后端传递到前端时保持对象的格式-堆栈溢出
- JavaScript-want按钮仅在单击另一个带有JS-Stack溢出的按钮时显示
- HTML-为什么我的布局上没有三个div在一行？-堆栈溢出
- 去除div之间的间隙,HTML-删除<div>和<p>标记之间的间距-堆栈溢出