toggle 相关问题

我在我的 Angular 4 项目中使用 ng-bootstrap：我在我的Angular 4项目中使用ng-bootstrap： <navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarsDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a> </li> </ul> </div> </navbar> 导航栏就在那里，它反应灵敏，看起来工作正常。但是当导航栏折叠时，导航栏切换按钮不会切换导航栏，并且我找不到错误。我最终做了这样的事情：在 html 模板中我有以下代码： <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleCollapsed()"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}"> ...... </div> </nav> 在组件中我有这个 export class NavComponent { collapsed = true; toggleCollapsed(): void { this.collapsed = !this.collapsed; } } 非常简单且直接，在C:\Niagara\Vega\ncPortal\.angular-cli.json 在脚本下，添加此行，或指向 node_modules 中的 bootstrap.js 文件， "../node_modules/bootstrap/dist/js/bootstrap.js" 并重建您的应用程序，现在，不仅是切换，而且所有其他操作也将按预期工作。正如评论中提到的以及 jmiguel77 的最佳答案只是想分享一下，我也在 ng-bootstrap Github 文档上找到了类似的方法https://ng-bootstrap.github.io/#/components/collapse/examples 我用 [ngbCollapse]="isCollapsed" 代替。从我所看到的来看，两种方法都得出相同的结果。这是我的代码： //app-navbar.component.html <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">{{title}}</a> <button class="navbar-toggler" type="button" (click)="toggleCollapsed()" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon" ngToggler></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault" [ngbCollapse]="isCollapsed" > <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown" ngbDropdown> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01" ngbDropdownMenu> <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> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> //app-navbar.component.ts import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-navbar', templateUrl: './app-navbar.component.html', styleUrls: ['./app-navbar.component.css'] }) export class AppNavbarComponent implements OnInit { @Input() title: String; isCollapsed = true; toggleCollapsed(): void { this.isCollapsed = !this.isCollapsed; } constructor() { } ngOnInit() { } } #you can use click method in your html and use router navigate in your type script. #In HTML File <a class="nav-link" (click)="onMenuClick('profile')">Profile </a> #In Type Script file onMenuClick(path) { $('.navbar-toggler').click(); this.router.navigate(['/' + path]); } 在 script 标签下的 Angular.json 文件中添加“./node_modules/jquery/dist/jquery.js”，它将起作用。我想我可以分享对我有用的东西。我有一些您可以考虑的要求；角8 引导程序4.5 ...在我的 html 模板中 [header.component.html] <nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light"> <div class="container-fluid"> <a routerLink="/" class="navbar-brand">APP_NAME</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="collapsed = !this.collapsed" > <span class="navbar-toggler-icon"></span> </button> <div id="navbarSupportedContent" [ngClass]="{ collapse: collapsed, 'navbar-collapse': true }" >  <ul class="navbar-nav ml-auto"> <li routerLinkActive="active" class="nav-item"> <a routerLink="/LINK_1" class="nav-link"> lINK_1 </a> </li> <li routerLinkActive="active" class="nav-item"> <a routerLink="/LINK_2" class="nav-link"> LINK_2 </a> </li> </ul> </div> </div> </nav> ...在我的 ts 组件内 [header.component.ts] import { Component, OnInit} from "@angular/core"; @Component({ selector: "app-header", templateUrl: "./header.component.html", styleUrls: ["./header.component.css"], }) export class HeaderComponent implements OnInit { collapsed = true; constructor() {} ngOnInit() {} } 我希望这有帮助。感谢您的反馈和建议。 :) 我在 Angular 10、Bootstrap 4.5 上也遇到了同样的问题。经过两天检查安装和提供所有必要依赖项的所有可能性后，我按照 Wyatt Lansdale 提供的链接中的说明进行操作（https://ng-bootstrap.github.io/#/components/collapse/examples）。只要我有 Bootstrap 文档中的汉堡包图标 (< span class="navbar-toggler-icon" >< /span >)，仍然没有区别，但是一旦我将其更改为汉堡包图标的 unicode 字符（& # 9 7 7 6 ；没有空格）问题就解决了！最终有效:) 正如 Sanish Joseph 提到的，即使批准的响应有效（作为解决方法），正确的解决方案是使用 angular.json（或 angular-cli.json）以及包含 bootstrap.min.js 的脚本。由于缺少引导脚本，因此需要检查该配置文件中是否也缺少引导 CSS： "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

toggle navbar ng-bootstrap

回答 8 投票 0

当 swiftUItoggle() 切换时如何触发操作？

在我的 SwiftUI 视图中，当 Toggle() 更改其状态时，我必须触发一个操作。切换本身只需要一个绑定。因此，我尝试触发 @State 变量的 didSet 中的操作...

swift toggle swiftui

回答 20 投票 0

当我在黑暗模式下翻译时，背景属性从 Angular 中的卡片内容中消失

`在我的角度项目中，我通过做了一个切换开关，用于在深色模式和浅色模式之间切换。然而，当我在d期间翻译我的申请时...

angular typescript toggle darkmode

回答 1 投票 0

如何在 Unity Inspector 中使用切换功能创建折叠 EditorGUI 元素

需要你的帮助。使用切换列表轻松创建折叠元素。像那样但我需要在标题中创建带有切换功能的折叠元素。像那样我认为这是可能的，因为脚本标题...

unity-game-engine toggle

回答 3 投票 0

由 javascript 添加的类但未应用 css？

我将使用 javascript 和 css 创建一个切换菜单类 .menu-slider 添加了属性显示块。但它不起作用，只有类 teggled 和 css 未应用这是代码 ...

javascript html css navbar toggle

回答 1 投票 0

为什么我的 Javascript 在尝试切换类时不起作用？

当我尝试应用这段代码时，它本身运行得很好，当我尝试应用这段代码时，它本身运行得很好， <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Toggle Class</title> <style> .ces-smiley { cursor: pointer; transition: stroke-width 0.3s, stroke 0.3s; } .selected { stroke-width: 2; stroke: red; } .inactive { /* Define your inactive styles here */ opacity: 0.5; } </style> </head> <body> <div class="ces-smileys"> <svg class="ces-smiley-zma ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"></circle> </svg> <svg class="ces-smiley-mak ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue"></rect> </svg> <svg class="ces-smiley-neu ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,5 90,90 10,90" stroke="black" stroke-width="3" fill="yellow"></polygon> </svg> <svg class="ces-smiley-moe ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="orange"></ellipse> </svg> <svg class="ces-smiley-zmo ces-smiley inactive" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3"></line> </svg> </div> <script> // Select all SVG elements with the class "ces-smiley" var svgs = document.querySelectorAll('.ces-smiley'); // Add click event listener to each SVG element svgs.forEach(function(svg) { svg.addEventListener('click', function() { // Remove the 'selected' class from all SVG elements svgs.forEach(function(svg) { svg.classList.remove('selected'); svg.classList.add('inactive'); // Add 'inactive' class to all SVGs }); // Add the 'selected' class to the clicked SVG element and remove 'inactive' class this.classList.remove('inactive'); this.classList.add('selected'); }); }); </script> </body> </html> 到我的网页：https://www.salland.nl/?bctest 代码不起作用（要查看代码在哪里使用，您首先必须单击左侧的紫色按钮，然后单击之后的表格，然后您会看到我想要切换的课程（笑脸））我安慰了 Chat GPT，检查了所有的类、控制台并在网上寻找答案，希望能找到一些东西来帮助我修复它。到目前为止还没有成功。试试这个代码： var svgs = document.querySelectorAll('.ces-smiley'); svgs.forEach(function(svg) { svg.addEventListener('click', function() { svgs.forEach(function(svg) { svg.classList.remove('selected'); }); this.classList.add('selected'); }); }); .ces-smiley { cursor: pointer; transition: stroke-width 0.3s, stroke 0.3s; opacity: 0.5; } .ces-smiley.selected { stroke-width: 2; stroke: red; opacity: 1; } <div class="ces-smileys"> <svg class="ces-smiley-zma ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"></circle> </svg> <svg class="ces-smiley-mak ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue"></rect> </svg> <svg class="ces-smiley-neu ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <polygon points="50,5 90,90 10,90" stroke="black" stroke-width="3" fill="yellow"></polygon> </svg> <svg class="ces-smiley-moe ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="orange"></ellipse> </svg> <svg class="ces-smiley-zmo ces-smiley" height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3"></line> </svg> </div>

javascript html css svg toggle

回答 1 投票 0

为什么“toggle()”函数不能产生与显式写出切换相同的结果？

以下块有效：主文件导入 SwiftUI 结构主页：查看{ @State private var ToDoItems: [ToDoItem] = [ToDoItem(title: "任务", 描述: "需要做", 紧急:

swiftui toggle swiftui-button

回答 1 投票 0

为什么Flutter Switch on更改为切换回初始位置

我目前正在研究用于更改明暗主题的颤动开关，我将其放在抽屉中，但是在我点击后开关又回到了初始或原始位置。如果是的话...

flutter dart themes toggle uiswitch

回答 1 投票 0

AngularJS 按钮显示/隐藏评论框

我一直在学习 AngularJS 并决定用它来做我的项目，我需要一个按钮的帮助。我正在制作一个博客平台，我想对帖子发表评论。这是我的帖子：我想要什么...