在使嵌套无序列表的元素折叠和展开时，我一直遇到一些问题。
尽管第一个元素可以正常运行，但随后的元素似乎不起作用。我想念一堂课或类似的东西吗？
请参阅所附的工作示例代码，演示我遇到的问题。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action">
<a href="#f1499360-b771-487a-9d84-e399f69f4568" data-toggle="collapse" class="" aria-expanded="true">
<h3>Test Site</h3>
</a>
<div class="collapse show" id="f1499360-b771-487a-9d84-e399f69f4568" style="">
<ul class="list-group">
<li class="list-group-item">
<a href="#c6f8ebd3-5a92-461d-a37b-dcf314897361" data-toggle="collapse" class="" aria-expanded="true">
<h5>132</h5>
</a>
<div class="collapse show" id="c6f8ebd3-5a92-461d-a37b-dcf314897361" style="">
<ul class="list-group">
<li class="list-group-item">
<a href="#e867a283-4dee-44fa-884a-6b7cf7cc42fe" data-toggle="collapse" class="" aria-expanded="true">
<h5>Hello</h5>
</a>
<div class="collapse show" id="e867a283-4dee-44fa-884a-6b7cf7cc42fe" style="">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left">Drive 1:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 2:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 3:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 4:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#50e71ff4-7ef5-4b2e-8615-cdfe328320a9" data-toggle="collapse">
<h5>name 2</h5>
</a>
<div class="collapse" id="50e71ff4-7ef5-4b2e-8615-cdfe328320a9">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left">Drive 1:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 2:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 3:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#4c6fc729-78b4-4d06-bbdd-749c96cafd05" data-toggle="collapse">
<h5>Test Assign</h5>
</a>
<div class="collapse" id="4c6fc729-78b4-4d06-bbdd-749c96cafd05">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left text-warning">Not Configured - Check Settings</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#5b2e25aa-c480-445b-91a6-a46f61291a51" data-toggle="collapse">
<h5>aaa</h5>
</a>
<div class="collapse" id="5b2e25aa-c480-445b-91a6-a46f61291a51">
<ul class="list-group">
<li class="list-group-item">
<a href="#cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47" data-toggle="collapse">
<h5>Station module 2</h5>
</a>
<div class="collapse" id="cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left text-warning">Not Configured - Check Settings</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：0)
使用以数字开头的元素ID无效。重命名ID，或在非数字字符前加上_ ...
演示：https://www.codeply.com/go/1xEVX8Ye2u
<ul class="list-group">
<li class="list-group-item">
<a href="#c6f8ebd3-5a92-461d-a37b-dcf314897361" data-toggle="collapse" class="" aria-expanded="true">
<h5>132</h5>
</a>
<div class="collapse show" id="c6f8ebd3-5a92-461d-a37b-dcf314897361" style="">
<ul class="list-group">
<li class="list-group-item">
<a href="#e867a283-4dee-44fa-884a-6b7cf7cc42fe" data-toggle="collapse" class="" aria-expanded="true">
<h5>Hello</h5>
</a>
<div class="collapse show" id="e867a283-4dee-44fa-884a-6b7cf7cc42fe" style="">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#_50e71ff4-7ef5-4b2e-8615-cdfe328320a9" data-toggle="collapse">
<h5>name 2</h5>
</a>
<div class="collapse" id="_50e71ff4-7ef5-4b2e-8615-cdfe328320a9">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#_4c6fc729-78b4-4d06-bbdd-749c96cafd05" data-toggle="collapse">
<h5>Test Assign</h5>
</a>
<div class="collapse" id="_4c6fc729-78b4-4d06-bbdd-749c96cafd05">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#5b2e25aa-c480-445b-91a6-a46f61291a51" data-toggle="collapse">
<h5>aaa</h5>
</a>
<div class="collapse" id="5b2e25aa-c480-445b-91a6-a46f61291a51">
<ul class="list-group">
<li class="list-group-item">
<a href="#cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47" data-toggle="collapse">
<h5>Station module 2</h5>
</a>
<div class="collapse" id="cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>