html accordion 在项目和面板上的不同功能

cedebl8k 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(128)

当我在项目和标题上添加不同的功能时，点击项目工作正常，但点击面板执行两个功能。是否有办法解决这个问题，因为我需要点击项目Function_1并点击面板Function_2

<fluent-accordion expand-mode="single">
        <fluent-accordion-item  *ngFor="let option of scope_summary" (click) = "Funcion_1(option.feedback)" [ngStyle]="{'background-color': option.color_code, 'position': 'relative'}">
            <span slot="heading" >
                {{option.display_name}}
                <span class="scope_badge" [ngStyle]="{'color': option.color_code}">
                    {{option.count}}
                </span> 
                
            </span>
            
            <div class="panel">
            <div *ngFor="let feedback of option.feedback" style="padding: 8px; overflow: auto; border-bottom: 1px solid gray;" (click)="Funcion_2(feedback)"> 
                <div *ngFor="let text of feedback.comments"
                 style="float: left; width: 85%;">{{text}}</div>
                <span [ngStyle]="{'background-color': option.color_code}"
                    style="float: left; width: 30px; height: 27px; text-align: center; font-size: 16px; margin-left: 8px; border-radius: 5px; padding-top: 4px;">
                    {{feedback.location.length}}</span>
            </div>
            </div>
        </fluent-accordion-item>
    </fluent-accordion>

我正在尝试设置不同的功能在这个代码为项目和不同的面板点击

Html

来源：https://stackoverflow.com/questions/74810407/fluent-accordion-different-function-on-item-and-panel

1条答案

按热度按时间

e4yzc0pl1#

如Nikola Batinica所说，在内部元素中使用event.stopPropagation()。

<div *ngFor="let feedback of option.feedback" (click)="Funcion_2(feedback, event)"> 
</div>

Funtion_2(feedback: string, event: any) {
  event.stopPropagation()
  // rest of your logic
}

赞(0）回复(0）举报 2022-12-16

我来回答

html accordion 在项目和面板上的不同功能

1条答案

相关问题

热门标签

最新问答