Question

在我看来，我有垂直导航丸。我希望能够嵌套这些导航元素。

这是我所拥有的：

用于制作药丸的结构

<div class="col-md-3">
    <ul class="nav nav-pills" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="pill" href="#Phase-One">Phase One</a>
            <ul>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#Phase-One-Remaining">What's Remaining</a>
                </li>
            </ul>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#Phase-Two">Phase Two</a>
            <ul role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="#">What's Remaining</a>
                </li>
            </ul>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#Phase-Three">Phase Three</a>
            <ul role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="#">What's Remaining</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

与我的问题相关的选项卡内容部分

<div class="tab-content col-md-9">
    <div id="Phase-One" class="container tab-pane active">
        <table class="table table-bordered table-hover initial">
            <thead class="thead-dark">
            <tr>
                <th class="text-center">Date Taken</th>
                <th class="text-center">Instructor</th>
                <th class="text-center">Phase</th>
                <th class="text-center">Training Type</th>
                <th></th>
            </tr>

            </thead>
            <tbody>
            @foreach (var record in Model.InitialTrainingsPhaseOne)
            {
                <tr class="text-center">
                    <td>
                        @Html.DisplayFor(model => record.DateTakenInitial)
                    </td>
                    <td>
                        @Html.DisplayFor(model => Functions.EData.GetEmployee(record.InstructorInfo.Ibm).FullName)
                    </td>
                    <td>
                        @Html.DisplayFor(model => record.CodePhase.Phase)
                    </td>
                    <td>
                        @Html.DisplayFor(model => record.PhaseTrainingType.PhaseTraining)
                    </td>
                    <td>
                        @Html.ActionLink("Details", "Details", "InitialTrainings", new {id = record.Id}, null)
                    </td>
                </tr>
            }
            </tbody>
        </table>
    </div>
    <div id="Phase-One-Remaining" class="container tab-pane fade">
        <p>Test</p>
    </div>

到目前为止，我只是在What's Remaining下测试Phase One，只是为了使其正常工作，然后在Phase Two和Phase Three下进行相同的操作。 / p>

但是，我现在遇到的问题是..如果我单击What's Remaining下的Phase One ..切换有效，但是如果我再次单击{{1} } ... Phase One仍然突出显示，我无法再次单击使其切换。

这是我的意思的照片。

所以我想我的问题是..是否可能有嵌套的导航丸项目？

感谢您的帮助。

嵌套导航丸作为选项卡

0 个答案: