Question

首次堆栈溢出问题。提前谢谢。

我正在尝试为用户构建一个引导网站，以便根据先前的决定得出答案。基本上，它是一个交互式决策树。

到目前为止我正在做什么（如果有更简单的方法，我愿意接受建议）

我正在使用Bootstrap的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>

Answer 1

您可以将名为“level”的属性添加到不同级别。

(%i) trigeval(cos(%pi/23));
                                      %pi
(%o)                              cos(---)
                                      23

然后添加一些j来关闭更高级别的标签。（打开的选项卡会使类'处于活动状态'。删除它会关闭它。）

<div role="tabpanel" class="tab-pane" level="1">

编辑：我使选择器$（'a [role = tab]'）更具体。

如何在bootstrap中构建交互式决策树

1 个答案: