Question

我有一个bootstrap可折叠导航组件，当折叠时，会显示折叠图标，但是当单击该图标时，将不会显示导航链接。任何人都可以向我解释为什么会发生这种情况吗？

<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dropdown-nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="small-logo">
            <img src="../assets/images/logo_small.png" alt="Logo" />
        </div>
    </div>
    <div class="collapse navbar-collapse" id="dropdown-nav">
        <ul class="nav navbar-nav" id="nav-left">
            <li class="nav-link dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <i class="glyphicon glyphicon-dashboard"></i>
                    <span>Dashboards</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li class="dropdown-link active" id="dashboard" (click)="handleNavigation($event)">
                        <a href="#"><i class="glyphicon glyphicon-facetime-video"></i>Fundus Exams</a>
                    </li>
                    <li class="dropdown-link" id="exams" (click)="handleNavigation($event)">
                        <a href="#"><i class="glyphicon glyphicon-camera"></i>Exams</a>
                    </li>
                </ul>
            </li>
            <li class="nav-link dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <i class="glyphicon glyphicon-list-alt"></i>
                    <span>Reporting</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li class="dropdown-link active" id="results" (click)="handleNavigation($event)">
                        <a href="#"><i class="glyphicon glyphicon-folder-open"></i>Results</a>
                    </li>
                    <li class="dropdown-link" id="report" (click)="handleNavigation($event)">
                        <a href="#"><i class="glyphicon glyphicon-tasks"></i>Result Report</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

虽然浏览器窗口是完整尺寸的，但导航按照预期的方式工作，但在它崩溃时却没有。

我想提一下，我正在使用Angular 2/4和Bootstrap 3开发此应用程序。这可能是问题所在吗？

Answer 1

要解决这个问题，我唯一能做的就是在TypeScript中添加了一个方法，可以在单击按钮时切换元素。

showHide(){
    $("#dropdown-nav").toggle()
}

<button type="button" class="navbar-toggle collapsed" (click)="showHide()">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

Bootstrap可折叠导航栏未显示折叠窗口上的链接

1 个答案: