下拉菜单在网络模式下工作正常，但在小屏幕/移动模式下导航栏切换不起作用。
这是我从codepen复制来学习的代码。我已经在 VS 代码中为项目安装了所有必要的包，但仍然无法追踪错误。
我已经添加了我的代码。
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>sitename</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
nav-bar-component.html
<nav class="navbar navbar-expand-lg navbar-light shadow-sm bg-light fixed-top">
<div class="container"> <a class="navbar-brand d-flex align-items-center" href="#">
<svg width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path
d="M511.981,118.509c-0.135-2.956-1.892-5.726-4.565-7.04l-159.24-79.62c-3.776-1.887-8.363-0.64-10.664,2.898 L229.916,200.282l-55.413-85.891c-0.796-1.235-1.945-2.264-3.259-2.922l-159.24-79.62C6.582,29.138,0,33.218,0,39.268v79.621 c0,4.581,3.712,8.294,8.294,8.294c4.581,0,8.294-3.712,8.294-.294V52.687l142.652,71.326v335.32L16.587,388.008V154.277 c0-4.581-3.712-8.294-8.294-8.294c-4.581,0-8.294,3.712-8.294,8.294v238.857c0,3.142,1.775,6.013,4.585,7.418l159.24,79.62 c5.427,2.714,12.003-1.375,12.003-7.418V318.087l324.17,162.085c5.427,2.714,12.003-1.375,12.003-7.418V118.888 C512,118.76,511.987,118.636,511.981,118.509z M175.827,299.541v-152.5l145.239,225.12L175.827,299.541z M495.413,459.335
l-139.34-69.671l108.576-186.993c2.299-3.961,0.952-9.037-3.009-11.337c-3.96-2.298-9.036-0.953-11.337,3.009L344.094,377.258
L239.77,215.555L347.383,49.998l144.717,72.359l-26.387,45.446c-2.299,3.961-0.952,9.037,3.009,11.337 c3.958,2.297,9.035,0.953,11.337-3.009l15.354-26.443V459.335z"
fill="#000" />
</g>
</g>
</svg>
<span class="ml-3 font-weight-bold">BRAND</span>
</a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
data-target="#navbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav mr-auto pl-lg-4">
<li class="nav-item px-lg-2 active"> <a class="nav-link" href="#"> <span
class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>Home</a> </li>
<li class="nav-item px-lg-2"> <a class="nav-link" href="#"><span class="d-inline-block d-lg-none icon-width"><i
class="fas fa-spa"></i></span>Services</a> </li>
<li class="nav-item px-lg-2"> <a class="nav-link" href="#"><span class="d-inline-block d-lg-none icon-width"><i
class="far fa-user"></i></span>About</a> </li>
<li class="nav-item px-lg-2 dropdown d-menu">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><span class="d-inline-block d-lg-none icon-width"><i
class="far fa-caret-square-down"></i></span>Dropdown
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</a>
<div class="dropdown-menu shadow-sm sm-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item px-lg-2"> <a class="nav-link" href="#"><span class="d-inline-block d-lg-none icon-width"><i
class="far fa-envelope"></i></span>Contact</a> </li>
</ul>
<ul class="navbar-nav ml-auto mt-3 mt-lg-0">
<li class="nav-item"> <a class="nav-link" href="#">
<i class="fab fa-twitter"></i><span class="d-lg-none ml-3">Twitter</span>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">
<i class="fab fa-facebook"></i><span class="d-lg-none ml-3">Facebook</span>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">
<i class="fab fa-instagram"></i><span class="d-lg-none ml-3">Instagram</span>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">
<i class="fab fa-linkedin"></i><span class="d-lg-none ml-3">Linkedin</span>
</a> </li>
</ul>
</div>
</div>
</nav>
<!--The html below this line is for display purpose only-->
<div class="py-5 text-center text-white bg-primary">
<div class="container py-5">
<div class="row py-5">
<div class="mx-auto col-lg-10">
<h1 class="display-4 mb-4 ">This is a beautiful Bootstrap 4 Navbar with Social Media Icons </h1>
<p class="lead mb-5">There is nothing more rare, nor more beautiful, than a woman being unapologetically
herself; comfortable in her perfect imperfection. To me, that is the true essence of beauty. </p> <a href="#"
class="btn btn-lg btn-outline-light mx-1">Take me there</a>
</div>
</div>
</div>
</div>
nav-bar.component.scss
.dropdown-toggle::after {
display: none;
}
.text-decoration-none{
text-decoration: none!important;
}
/* Font Awesome Icons have variable width. Added fixed width to fix that.*/
.icon-width { width: 2rem;}
nav-bar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nav-bar',
templateUrl: './nav-bar.component.html',
styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
script.js
$(document).ready(function () {
if ($(window).width() > 991){
$('.navbar-light .d-menu').hover(function () {
$(this).find('.sm-menu').first().stop(true, true).slideDown(150);
}, function () {
$(this).find('.sm-menu').first().stop(true, true).delay(120).slideUp(100);
});
}
});
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": "827a6af6-728f-4d5f-96bc-943087091b6a"
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"client": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/script/script.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "client:build:production"
},
"development": {
"browserTarget": "client:build:development",
"sslCert": "ssl/server.crt",
"sslKey": "ssl/server.key",
"ssl": true
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "client:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "client"
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
declarations: [
AppComponent,
NavBarComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
NgbModule,
FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
styles.scss
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css";
@import "../node_modules/font-awesome/css/font-awesome.min.css";
答案 0 :(得分：0)
我添加了以下样式并且对我有用
var firstPropSplitter = path.IndexOf('.');
var firstProperty = path.Substring(0, firstPropSplitter);
var restPath = path.Substring(firstPropSplitter + 1);
var index = item["index"];
var newPath = $"{firstProperty}[{index}].{restPath}";