Question

我正在尝试扩展这种手风琴视图。

每当点击分区按钮时，此 userSelection[i].addEventListener。事件列表器就会使 ID变为“打开”。因此手风琴得到了扩展。

当我不使用*ngFor时，这工作正常。如果我使用了*ngFor指令，则addEventListener不起作用。

无法正常工作的HTML代码：

<div class="accordian" id='accordian'>
        <section class="section">
            <div class="section1" *ngFor='let m of data.accordian.printers'>
                <button class="accordion" (click)='modelpop()'>{{m.type}}
                            <i class="fa fa-angle-right closearrow" id='arrowshow'></i>
                            <i class="fa fa-angle-down openarrow" id='arrownotshow'></i>
                    </button>

                <div class="panel" id='close'>
                    <p>menu 1</p>
                    <p>menu 2</p>
                    <p>menu 3</p>
                    <p>menu 4</p>
                </div>
            </div>

CSS代码：

 #close {
    max-height: 0;
    overflow: hidden;
}

.accordian {
    position: absolute;
    background: rgb(244, 244, 244);
    top: 140px;
    left: 10px;
    width: 95%;
    box-shadow: 0 0 20px 2px #00000085;
    padding-bottom: 20px
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 25px;
    width: 250px;
    border: none;
    outline: none;
    border-radius: 10px;
    font-family: "Montserrat";
    font-weight: bolder
}

类型脚本：

ngOnInit(){    
var userSelection = document.getElementsByClassName("accordion");
    var pane = document.getElementsByClassName('panel');

     for (let i = 0; i < userSelection.length; i++) {
    userSelection[i].addEventListener("click", function () {
    if (pane[i].id == 'open') {
              pane[i].id = 'close';

            } else {
              pane[i].id = 'open';

            }
    })
    }

}

运行良好的HTML代码：

 <section class="section">

    <div class='section1'>
        <button class="accordion" (click)='modelpop()'>Section 1
            <i class="fa fa-angle-right closearrow" id='arrowshow'></i>
            <i class="fa fa-angle-down openarrow" id='arrownotshow'></i>
        </button>

        <div class="panel" id='close'>
            <p>menu 1</p>
            <p>menu 2</p>
            <p>menu 3</p>
            <p>menu 4</p>
        </div>
        <div class='section1'>
            <button class="accordion" (click)='modelpop()'>Section 1
                <i class="fa fa-angle-right closearrow" id='arrowshow'></i>
                <i class="fa fa-angle-down openarrow" id='arrownotshow'></i>
            </button>

            <div class="panel" id='close'>
                <p>menu 1</p>
                <p>menu 2</p>
                <p>menu 3</p>
                <p>menu 4</p>
            </div>
        </div>

Answer 1

我创建了一个简单的解决方案，可切换点击时元素的可见性。

您无需编写太多代码，而只需为绑定到列表的数组中的每个项目维护可见性标志，并在每次单击时切换该标志。

样品位于https://stackblitz.com/edit/angular-toggle-options

它也有animations。您可以通过删除组件装饰器中的animations属性和模板中的动画触发器来摆脱它

添加事件侦听器在动态（* ngFor）创建的元素中不起作用

我正在尝试扩展这种手风琴视图。

1 个答案: