如何在引導程序中構建交互式決策樹

我正試圖建立一個引導站點，以便用戶根據以前的決定得出答案。基本上，它是一個交互式決策樹。

我在做什麼，到目前爲止（我接受建議，如果有做的事情更簡單的方法），我使用的是引導的導航藥丸供用戶選擇自己的選擇

。導航藥丸打開其他導航藥丸等，直到用戶到達樹的末端併到達答案。我遇到的問題是最終的「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

如何在引導程序中構建交互式決策樹

回答

相關問題