javascript - AngularJS 引导下拉导航栏

Question

我正在学习 bootstrap，但遇到了问题。

我在导航栏上做了一个下拉菜单。但是，当我点击它时，下拉菜单并没有折叠。 class="dropdown" 不会更改为 class="dropdown open" 并且指令 "aria-expanded" 不会更改从 "false" 到 "true"。只有当我转到另一个页面然后返回时，下拉菜单才能正常工作。我想知道为什么会这样。

我正在使用两个 Bootstrap 库，因为我需要 boostrap 4 才能使用卡片组容器

index.html(包含所有更新的文件)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router@1.0.3/release/angular-ui-router.min.js"></script>
<script src="node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="style.css" />

board.html

<div ui-view>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Home</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#">Today</a></li>
                    <li><a href="#">Tomorrow</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a>
                        <ul class="dropdown-menu">
                            <li><a href="#/home">August 1st</a></li>
                            <li><a href="#/home">August 2nd</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <cards></cards>
</div>

Answer 1

您的示例似乎在我本地和包含的代码段中都能正常运行。也许确保您的测试环境中没有任何缓存问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div ui-view>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Home</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#">Today</a></li>
                    <li><a href="#">Tomorrow</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a>
                        <ul class="dropdown-menu">
                            <li><a href="#/home">August 1st</a></li>
                            <li><a href="#/home">August 2nd</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <cards></cards>
</div>