如何防止Bootstrap点击时折叠？

Question

我有一个div，点击它会触发Bootstrap的折叠功能。

在这个div中，我还有一个按钮，可以触发Bootstrap Modal弹出框。

问题是，当我点击Modal触发器时，两者都被触发：折叠和弹出框。我只希望Modal触发器能够起作用。

是否有一种方法可以防止在点击时触发Bootstrap Collapse折叠功能？

例如：

    $("[data-toggle='collapse'] [data-toggle='modal']").click(function() {
       $(this).parent().SomehowStopCollapse;
    });

- MeltingDog

Answer 1

您可以使用event.stopPropagation()来阻止事件冒泡到DOM树，从而防止任何父级处理程序被通知事件。

$("[data-toggle='collapse'] [data-toggle='modal']").click(function(event) {
    event.stopPropagation();
    var thisModal = $(this).attr('data-target');
    $(thisModal).modal('show');
});

- Ismail RBOUH

---

谢谢。已更新您的代码以触发模态框。 - MeltingDog

我曾错误地认为它对我无效，但我意识到我停止了“change”事件的传播。停止“click”事件的传播效果很好。 - r34

Answer 2

为了防止触发事件，请使用event.preventDefault或使用event.stopPropagation()来防止事件传递给父元素。

这是你需要的内容吗？

例如。

$("[data-toggle='collapse'] [data-toggle='modal']").click(function() {
       event.stopPropagation() // or 
       event.preventDefault
       $(this).parent().SomehowStopCollapse;
    });

- Rui Costa

Answer 3

在您的按钮中删除 data-toggle='collapse'，不要忘记放置正确的目标...

- Hans Yulian