bootstrap panel with button - collapse issue

问题

Here is my code:

<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>

Issue:

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?

Thanks in advance

回答1:

Here is what I've done:

• Added class "disable-collapse" to the button
• Added script below

$('.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.

回答2:

Why don,t you remove the data-toggle="collapse" from inside your

 <div class="panel-heading clearfix" role="tab" id="heading-details" data-toggle="collapse" data-target="#details" data-parent="#panel-group" href="#details">

It will automatically prevent the collapse

or use stopPropagation(); method which will do the same

it will be something like below.Add an Id into your link button .

<a class="btn btn-primary btn-sm pull-right" id="btn" asp-action="Action">
        <span class="glyphicon glyphicon-pencil"></span>
</a>

Jquery Code

$(document).on('click', '#btn', function(e){
e.stopPropagation();  
});

回答3:

   <div class="panel-body">
        @Html.Partial("_DetailsPartial", Model)                
    </div>

Remove this piece of code

来源：https://stackoverflow.com/questions/40056199/bootstrap-panel-with-button-collapse-issue