- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在使用 ngb 下拉列表在屏幕上显示用户列表。当用户单击下拉菜单时,它会显示用户详细信息表单。
问题 是,此表单会在其他用户和内容之上弹出。我需要用户详细信息折叠而不是弹出。
我尝试设置 aria-haspopup=false 但这没有任何作用,事实上它在检查器中仍然显示为 true,所以我对它的作用以及现在如何实现这一点感到有点困惑?我正在考虑像在导航栏切换器中那样使用数据切换和折叠之类的东西,但不确定如何在 ngbDropdown 菜单中正确实现它....
image link for desired result 1
<div ngbDropdown *ngFor="let user of users" class="user-list">
<a ngbDropdownToggle id="dropdownForm" role="button" aria-haspopup="false" aria-expanded="false">{{user.firstName}} {{user.lastName }} </a>
<div ngbDropdownMenu aria-labelledby="dropdownForm">
<userForm></userForm>
</div>
</div>
最佳答案
从您分享的描述/图片来看,您似乎需要 Accordion ,而不是弹出式...因为 Accordion 具有可折叠效果,而下拉菜单始终是弹出式
相关HTML:
<ngb-accordion #acc2="ngbAccordion" activeIds="ngb-panel-0" [closeOthers]="true">
<ngb-panel *ngFor="let user of users; let idx = index" class="user-list" >
<ng-template ngbPanelTitle >
<span (click)='toggleAccordion(idx)'>{{user.firstName}} {{user.lastName }}</span>
<span class='stickToRight' (click)='toggleAccordion(idx)' style='float:right'>
<!-- ... {{idx}} - {{user.opened }} -->
<ng-container *ngIf="user.opened">
<i class='fa fa-angle-down'></i>
</ng-container>
<ng-container *ngIf="!user.opened">
<i class='fa fa-angle-right'></i>
</ng-container>
</span>
</ng-template>
<ng-template ngbPanelContent>
<!-- <userForm></userForm> -->
<input type='text' placeholder="first Name" value="{{user.firstName}}" /> <br/>
<input type='text' placeholder="last Name" value="{{user.lastName}}" /> <br/>
<input type='text' placeholder="Age" /> <br/>
</ng-template>
</ngb-panel>
</ngb-accordion>
相关TS:
import { Component } from '@angular/core';
@Component({
selector: 'ngbd-accordion-basic',
templateUrl: './accordion-basic.html',
styles: [`
.stickToRight{position: absolute; right: 30px;}
`]
})
export class NgbdAccordionBasic {
users = [
{ firstName: 'fName 1', lastName: 'lName 1', opened: false },
{ firstName: 'fName 2', lastName: 'lName 2', opened: false },
{ firstName: 'fName 3', lastName: 'lName 3', opened: false },
{ firstName: 'fName 4', lastName: 'lName 4', opened: false },
{ firstName: 'fName 5', lastName: 'lName 5', opened: false }
];
resetOthers(index) {
for (var i = 0; i < this.users.length; i++) {
if (i !== index) {
this.users[i].opened = false;
}
}
}
toggleAccordion(index) {
if (this.users[index].opened == false) {
this.users[index].opened = true;
this.resetOthers(index);
} else {
this.users[index].opened = false;
this.resetOthers(index);
}
}
}
更新:根据下面提问者的评论
关于html - Angular 7+ : ngbDropdown menu collapse instead of popover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56834063/
我有这个左侧站点菜单: Typography Name 1
我有两个问题: 是否有合理的解释,为什么会这样? 是否有针对这种情况的 CSS 解决方法? 谢谢! table { border-collapse: collapse; pad
我想知道为什么我的类“panel-collapse”“collapse”不起作用。 我刚刚将文件上传到我的服务器上,当我单击链接区域时,它们不起作用(它们不会放下隐藏内容)。但是,它们在我的 Drea
在这种情况下,我完全感到困惑。当我使用 border-collapse: collapse; 从 1px (#1) 到 大 值 (#2) 并回到 1px (#3),我有视觉缺陷。 #1 和#3 相同,
我有两个表,想要使用 Javascript 同步它们的列宽。只要我不为表格设置 CSS 属性 border-collapse:collapse;,它就能在 Google Chrome 中按预期工作。
我正在前端使用 Bootstrap 编写一个个人提要阅读器,并想添加一个“折叠/全部展开”按钮。 这是我的第一个 JavaScript/JQuery 代码,所以除了在 Firefox Develope
我正在使用以下模块:https://roszpun.github.io/vue-collapse/#/ 我似乎无法弄清楚如何正确地将类添加到包装元素,因为我首先考虑在 onStatusChange 上
在我的代码中,您将看到一个按钮和一个可折叠元素。如果单击该按钮,页面将滚动到可折叠状态。 用户点击按钮后是否可以打开折叠?我考虑过使用视口(viewport),但每次在视口(viewport)中时,折
我有一个 Collapsible-set(有 5-10 个可折叠)并使用此代码查找已打开的: $("#mySet").on("collapsibleexpand", function (e) {
我正在使用 jQuery Collapse在通过 Ajax 插入的元素上。 当我应用下面的行时,它删除了 collapse 类。我需要保留该类,以便在需要关闭 Ajax 内容时调用 collapse(
我正在尝试使用 隐藏表格中的列和 visibility:collapse如此处所述: Is it possible to hide / show table columns by changing
我在格式化 nav navbar-nav 无序列表中的列表项时遇到问题。当页面为全尺寸时,我想保留格式不变。但是,我想在页面缩小时格式化/自定义列表项,并且列表项“消失”并且仅在用户单击切换按钮后“重
出于某种原因,即使我第一次执行完全相同的操作,我也无法再次触发显示。 基本上,我有一个表单,用户可以从下拉列表中选择前两个字段(商家提供商和银行)或添加新条目。因此,我在 Javascript 中使用
我使用了 jsfiddle 68RXP 中的示例collapse-group 创建一个可扩展的 div: HTML: Heading Lorem ipsum View
我有以下问题:当我翻译表格中的标题单元格并且表格设置为 border-collapse:collapse 时,单元格将移动但不会移动它们的边框。我创建了一个测试: 标记:
我是 CSS 和 Bootstrap 3.0 的新手。下面是我可以在很多地方找到的代码,现在我可以毫无问题地编写它。但我真的不知道幕后情况如何。 Company
我有一个包含多行的表格,例如: Line1 Line2 Line3 现在,在 javascript(基于单选输入字段)中,我想通过添加 visibility:collapse 来
我有一个网页,我在其中尝试使所有浏览器的边框正确。参见 http://dl.dropbox.com/u/17256431/SpreadsheetConverter/border-3/border-3.
我正在尝试使用 javascript 来创建 Bootstrap 我只需要更新 javascript 文件,而不是在网站的各个页面上管理导航栏。 这是横幅的代码: document.write( "
给定以下 HTML 页面,表格顶部出现一条水平线,其中第一行将包含第二和第三个单元格(如果已定义)。 Test Page table { margin:10px 0 10px 0;
我是一名优秀的程序员,十分优秀!