第一个堆栈溢出问题。提前致谢。
我正在尝试构建一个 Bootstrap 站点，供用户根据先前的决定得出答案。 本质上，它是一个交互式决策树。
目前我在做什么(如果有更简单的做事方式，我愿意接受建议)
我正在使用 Bootstrap 的导航丸让用户选择他们的选择。 nav-pills 打开其他 nav-pills 等等，直到用户到达树的末端并得到答案。 我遇到的问题是，当用户回到第一个决定并遵循不同的路径时，最终的“tabpanel”答案不会隐藏。
我在下面包含了代码。要重新创建我遇到的问题，请单击“1stYes”，然后单击“2ndYesFrom1stYes”，然后单击“2ndNoFrom1stYes”。 如您所见，之前的答案仍然出现。
<head>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div>
<h2 class="text-center">User Decision Tree</h2>
<br>
<!-- First decision -->
<ul class="nav nav-pills nav-justified">
<h3 class="text-center">1st decision</h3>
<br>
<li role="presentation" class=""><a href="#2ndDecisionYesFrom1st" aria-controls="2ndYes" role="tab" data-toggle="tab">1stYes</a>
</li>
<li role="presentation"><a href="#2ndDecisionNoFrom1st" aria-controls="2ndNo" role="tab" data-toggle="tab">1stNo</a>
</li>
</ul>
<br>
<!-- Second decision -->
<div class="tab-content">
<br>
<div role="tabpanel" class="tab-pane" id="2ndDecisionYesFrom1st">
<h3 class="text-center">2nd Decision After Yes From First Decision</h3>
<br>
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#AnswerAfterYesFrom2ndYesFrom1st" role="tab">2ndYesFrom1stYes</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#AnswerAfterNoFrom2ndYesFrom1st" role="tab">2ndNoFrom1stYes</a>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="2ndDecisionNoFrom1st">
<h3 class="text-center">2nd Decision After No From First Decision</h3>
<br>
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#AnswerAfterYesFrom2ndNoFrom1st" role="tab">2ndYesFrom1stNo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#AnswerAfterNoFrom2ndNoFrom1st" role="tab">2ndNoFrom1stNo</a>
</li>
</ul>
</div>
</div>
<br>
<!-- Answers -->
<div class="tab-content">
<br>
<div role="tabpanel" class="tab-pane" id="AnswerAfterYesFrom2ndYesFrom1st">
<h3 class="text-center">Answer after 2nd Decision Yes and 1st Decision Yes</h3>
<br>
<h4 class="text-center"><i>Here is the answer after 2nd Decision Yes and 1st Decision Yes</i></h4>
</div>
</div>
<div class="tab-content">
<br>
<div role="tabpanel" class="tab-pane" id="AnswerAfterNoFrom2ndYesFrom1st">
<h3 class="text-center">Answer after 2nd Decision No and 1st Decision Yes</h3>
<br>
<h4 class="text-center"><i>Here is the answer after 2nd Decision No and 1st Decision Yes</i></h4>
</div>
</div>
<div class="tab-content">
<br>
<div role="tabpanel" class="tab-pane" id="AnswerAfterYesFrom2ndNoFrom1st">
<h3 class="text-center">Answer after 2nd Decision Yes and 1st Decision No</h3>
<br>
<h4 class="text-center"><i>Here is the answer after 2nd Decision Yes and 1st Decision Yes</i></h4>
</div>
</div>
<div class="tab-content">
<br>
<div role="tabpanel" class="tab-pane" id="AnswerAfterNoFrom2ndNoFrom1st">
<h3 class="text-center">Answer after 2nd Decision No and 1st Decision No</h3>
<br>
<h4 class="text-center"><i>Here is the answer after 2nd Decision No and 1st Decision Yes</i></h4>
</div>
</div>
</div>
</div>
<!-- /.container -->
</body>最佳答案
您可以为不同级别添加一个名为“级别”的属性。
<div role="tabpanel" class="tab-pane" level="1">
然后添加一些js来关闭更高级别的标签。 (打开的选项卡获得“事件”类。删除它会关闭它。)
$('a[role=tab]').on('click', function (e) {
var clickLevel = Number($(e.target).parent('li').attr('level'));
$('div.tab-pane.active').each(function () {
if (Number($(this).attr('level')) > clickLevel) {
$(this).removeClass('active');
});
});
编辑:我使选择器 $('a[role=tab]') 更具体。
关于javascript - 如何在 Bootstrap 中构建交互式决策树，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39530422/