使用纯 java 脚本将切换功能仅应用于单击的元素

Question

这是我的 html 显示数据的代码

<ul id="menu">
<li *ngFor="let category of componentContents.dashboardMenu;let i = index" >
    <p (click)="toggle_visibility()"class="parent-menu">{{category.category}</p>
    <ul id="{{(category.category).split(' ').join('-')}}" class="toggled" 
        *ngIf="category.subCategory.length > 0" style="display:none">
        <li *ngFor="let subCat of category.subCategory"> 
            <a routerLink={{subCat.router}} routerLinkActive="active"  
            {{subCat.subcategory}}</a>
        </li>
    </ul>
</li>

这是我尝试在点击时显示子菜单的功能，但所有 p 标签的所有子菜单都变得 displayed.I 想将切换功能仅应用于点击的 p 元素。

toggle_visibility() {
    var pm = document.getElementByClassName('parent-menu');
    var e = document.getElementsByClassName('toggled');
    for (let i = 0; i < pm.length; i++) {
        if (e[i].style.display == 'block' || (e[i].style.display == '') {
                e[i].style.display = 'none';
                }
                else {
                    e[i].style.display = 'block';
                    }
                };
            }

因为我是 java 脚本和 angular 2 的新手。需要帮助来解决这个问题。

Answer 1

你应该使用

[style.display]="e[i].style.display == '' ? 'none' : 'block'"

(click)="toggle_visibility(i)"

toggle_visibility(i) {
  this.e[i] = !this.e[i];
}

其中 e 是一个数组，其项数与 componentContents.dashboardMenu

使用纯 java 脚本将切换功能仅应用于单击的元素

Apply toggle function to only clicked element using pure java script

javascript

html

angular