如何在引导程序中构建交互式决策树

我正试图建立一个引导站点，以便用户根据以前的决定得出答案。基本上，它是一个交互式决策树。

我在做什么，到目前为止（我接受建议，如果有做的事情更简单的方法），我使用的是引导的导航药丸供用户选择自己的选择

。导航药丸打开其他导航药丸等，直到用户到达树的末端并到达答案。我遇到的问题是最终的“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>

来源

2016-09-16 Doraymifasola

你可以添加一个名为 '等级' 的不同级别的属性。

<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 [角色=标签]”）更具体。

来源

2016-09-16 14:18:43 burktelefon

感谢您的回复burktelefon。我有点不确定如何使用您的解决方案。作为一个例子，我能否以你的代码实现它来困扰你？ – Doraymifasola

目前我有点太忙了，但我会尽量在稍后花点时间。 – burktelefon

如何在引导程序中构建交互式决策树

回答

相关问题