如何在Bootstrap Accordion的标题上添加按钮,以使单击它不会折叠或展开它?

dl5txlt9  于 12个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(108)

这里我在Accordion的标题上添加了两个按钮,但是当我单击按钮时,整个Accordion会折叠或展开。有没有一种方法可以以这样的方式添加按钮,即单击它们不会折叠或展开Accordion?

<div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
            aria-controls="panelsStayOpen-collapseTwo">
            <div>26-08-21</div>
            <div style="margin-left: -20px;" class="col-1"></div>
            <div>project_id</div>
            <div class="col-3"></div>
            <div>title</div>
            <div class="col-3"></div>
        </button>
        <button type="button" class="btn btn-sm  btn-success">
            <em class="far fa-edit"></em>&nbsp;&nbsp;Edit
        </button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-sm btn-danger">
            <i class="far fa-trash-alt"></i>&nbsp;&nbsp;Delete
        </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
        aria-labelledby="panelsStayOpen-headingTwo">
        <div class="accordion-body">
            <br>
            <button style="margin-left: 20px;" type="button" class="btn btn-sm btn-outline-primary">Download CSV</button>
        </div>
    </div>
</div>

字符串

monwx1rj

monwx1rj1#

点击按钮,您需要使用$event.stopPropagation()

public onButtonClick($event): void {
    // Do something on click
    $event.stopPropagation()
}

字符串

相关问题