我(根本)不是 Bootstrap 专家,我有点被困在这里,在另一个不起作用的崩溃中崩溃。
一个简单的折叠效果很好:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo" class="collapse">
<li>
<a href="/main">Level 1</a>
</li>
</ul>
</li>
它给出了这个:
但是当我做同样的事情在这个崩溃树中添加另一个级别时。
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo" class="collapse">
<li>
<a href="/main">Level 1</a>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo_2" class="collapse">
<li>
<a href="/main"> sublevel1</a>
</li>
<li>
<a href="/main"> sublevel2</a>
</li>
</ul>
</li>
</ul>
</li>
奇怪的是它给出了这个!
有人能告诉我为什么我的子关卡显示与 level1 不同吗?
完成
我正在使用 Bootstrap 3
最佳答案
这是一个仅 bootstrap 3 的工作示例。
如您所见,它完全按照预期工作:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo" class="collapse">
<li>
<a href="/main">Level 1</a>
</li>
<li>
<a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo_2" class="collapse">
<li>
<a href="/main"> sublevel1</a>
</li>
<li>
<a href="/main"> sublevel2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
示例中的颜色表明您使用了一些/一些额外的 css 文件。
关于javascript - 折叠内折叠不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42322073/