Bootstrap：使用面板标题折叠面板主体

我有一个Bootstrap v3面板，其中包含面板标题和面板主体。我希望用户能够点击面板标题，它会折叠/展开面板主体。我正在使用Bootstrap的Collapse JavaScript来做到这一点。这是我的标记：Bootstrap：使用面板标题折叠面板主体

<div class="panel panel-default group-panel"> 
    <div class="panel-heading" role="button" data-toggle="collapse" data-target="#panel-body-foobar"> 
    <a href="#" class="btn btn-xs">Action Button</a> 
    </div> 
    <div class="panel-body collapse in" id="panel-body-foobar"> 
    Some content here. 
    </div> 
</div>

此代码正常工作，单击面板标题将折叠/展开正文。但是，请注意，我在面板标题中也有一个按钮。当我点击那个按钮时，它正在折叠/展开面板主体。如果你不知道我的意思，请看jsfiddle。

我怎样才能配置这个，只有直接点击面板标题，而不是任何子元素，才会触发合拢/展开？

来源

2015-11-15 Joseph

试试这个：https：//jsfiddle.net/Wc4xt/3230/ – Alex

我认为解决方案是定义我自己的点击处理程序（而不是使用一个引导automaitcally设置），这对孩子忽略点击：

$('.panel-heading[data-toggle^="collapse"]').click(function(){ 
    var target = $(this).attr('data-target'); 
    $(target).collapse('toggle'); 
}).children().click(function(e) { 
    e.stopPropagation(); 
});

感谢this answer帮助我弄清楚如何有一个jQuery点击处理程序忽略了对孩子的点击。请注意，由于使用了e.stopPropagation();，这并不会禁用子节点上的任何点击处理程序。

来源

2015-11-15 21:24:50 Joseph

解决方案只是停止从面板标题中的按钮传播，除此之外：https://jsfiddle.net/mwxea7qn/ 1 /。您不需要对'data-toggle'和'data-target'属性进行任何其他操作。 –

的确，但这需要我将这一行放在所有孩子的点击处理程序中。在我的问题中，我想保持简单，所以我只包含一个按钮，但在我的实际项目中，我确实有多个按钮，因此将其放置在面板标题上似乎有意义。 – Joseph

您不必按ID选择。这里有一个演示扩展了我的初衷，以解决您在上面分享的问题：https://jsfiddle.net/mwxea7qn/2/ –

Bootstrap：使用面板标题折叠面板主体

回答

相关问题