Question

我通过在HTML标记中指定data-toggle和href属性来使用Bootstrap的崩溃。使用这个，我构建了一个多级可折叠列表。这是我面临的问题：
让我们说Level 2是根，Level 1作为Level 2的子级，Level 0作为Level 1的子级。所以我们有一个2级层次结构。最初，只显示级别2，所有孩子都崩溃了。当我点击2级时，会打开1级。然后，当我点击Level 1时，Level 0打开。到目前为止，很好。现在，当我关闭第2级时，只有第2级显示为预期。但是，较低级别不会崩溃，它们只是隐藏。如果我再次打开Level 2，它会向我显示Level 1和Level 0（之前打开Level 0）。

我希望它能够在单击Level 2时，始终只显示Level 1，而不是Level 0.只有在单击Level 1时才会显示Level 0。

以下是代码：

        <a href="#target1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">{{.}}</a>
        <div class="collapse" id="target1">
                    <a href="target2" class="list-group-item" data-toggle="collapse">{{state}}<i class="fa fa-caret-down"></i></a>
                    <div class="collapse list-group-submenu" id="target2">
                          <a href="#" class="list-group-item" data-toggle="collapse">{{name}}</a>
                    </div>
        </div>
        </div>

Answer 1

你必须使用jquery来完成这个，如下所示。我使用了崩溃元素事件的bootstraps功能：hidden.bs.collapse在隐藏崩溃元素时触发。

另一个旁注：我认为你的代码中有一个拼写错误： “州”div的href应为#target2而不是target2

$(document).ready(function() {
    $('#target1').on('hidden.bs.collapse', function () {
        console.log('triggered');      
        $('#target2').collapse('hide');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<a id="target0" href="#target1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">something</a>
<div class="collapse" id="target1">
    <a href="#target2" class="list-group-item" data-toggle="collapse">state<i class="fa fa-caret-down"></i></a>
    <div class="collapse list-group-submenu" id="target2">
        <a href="#" class="list-group-item" data-toggle="collapse">name</a>
    </div>
</div>

Bootstrap collapse：关闭根元素时关闭所有子节点

1 个答案: