具有按钮的引导面板-崩溃问题 [英] bootstrap panel with button - collapse issue

问题描述

这是我的代码:

<div class="panel panel-default">
    <div class="panel-heading clearfix" role="tab" id="heading-details" data-toggle="collapse" data-target="#details" data-parent="#panel-group" href="#details">
       <h4 class="panel-title pull-left">My panel title</h4>

       <a class="btn btn-primary btn-sm pull-right" asp-action="Action">
            <span class="glyphicon glyphicon-pencil"></span>
        </a>
    </div>
    <div id="details" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
            @Html.Partial("_DetailsPartial", Model)                
        </div>
    </div>
</div>

问题:

当我单击按钮链接时，面板主体会展开/折叠.我不想在单击按钮时切换面板主体.

When I click on a button link then panel body expands/collapses. I don't want to toggle panel body when clicking on button.

如何关闭按钮上的数据切换?

How can I turn off data-toggle on the button?

预先感谢

推荐答案

这是我所做的:

• 在按钮上添加了禁用折叠"类
• 在下面添加了脚本

$('.disable-collapse').click(function (e) 
{ event.stopPropagation(); })

有了这个，当我单击面板标题时，面板主体就会切换，但是当我单击按钮时，面板主体不会切换.

With this, panel body toggles when I click on the panel header but not when i click on the button.

这篇关于具有按钮的引导面板-崩溃问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！