Question

这是我的代码：

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

问题：

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

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

提前致谢

Answer 1

以下是我所做的：

添加了课程＆＃34;禁用崩溃＆＃34;按钮
添加了以下脚本

＆＃13;

dict1 = {(1,1,1) : ('abc'), (2,2,2) : ('def')} 
dict2 = {('abc') : (1,2,3), ('def') : (4,5,6)}

＆＃13;

这样，当我点击面板标题时，面板主体会切换，但是当我点击按钮时，面板主体不会切换。

Answer 2

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

删除这段代码

Answer 3

为什么不删除

中的data-toggle="collapse"

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

它会自动阻止崩溃

或使用stopPropagation();方法执行相同的操作

它将类似于下面。在您的链接按钮中添加一个ID。

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

Jquery代码

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

带按钮的自举面板 - 崩溃问题

3 个答案: