我在区块链上创建了一个Angular 4应用。它必须是响应。 用于折叠和展开导航栏的汉堡按钮不起作用。
这是代码:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" [routerLink]="['/home']">I-Talent</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
这是我的角色cli:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "demo-simple"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
这是我的index.html:
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
See LICENSE in the source repository root for complete license information. -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Microsoft Graph Connect sample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
</body>
</html>
正如您所看到的,我在任何地方都添加了jQuery,但无济于事。
任何帮助?
提前致谢!
答案 0 :(得分:0)
根据我对原始帖子的评论,问题是您的data-target
值与您为下拉菜单指定的实际id
不符。
如果您定位#navbarSupportedContent
,请参阅以下代码:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
然后,您的.collapse
包装器必须具有相同的id
:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
目前您使用的是navbarNav