Javascript 单击“外部”上的折叠引导按钮

我正在使用这段代码，它几乎是从引导程序中取出的，以获得按钮的简单折叠行为（我将按钮转换为链接）：

点击我
这里是示例文本

现在，我想做的是当用户点击按钮外的时候关闭文本。我知道这在堆栈溢出中被问了很多次，但jQuery一点也不直观！至少对于像我这样的初学者来说，我真的无法适应任何关于这个问题的解决方案，从而获得想要的行为

例如，我使用这个脚本（借用的概念）来控制上述代码的外部点击行为：

<script>
  $(document).ready(function () {
      $(document).click(function (event) {
      var clickover = $(event.target);
      var _opened = $(".btn-link").hasClass("collapse");
             if (_opened === true && !clickover.hasClass("data-toggle") && clickover.parents('.btn-link').length == 0) {
                $("button.data-toggle").click();
             }
       });
  });
</script>

$（文档）.ready（函数（）{
$（文档）。单击（函数（事件）{
var clickover=$（event.target）；
var_opened=$（“.btn link”）.hasClass（“崩溃”）；
如果（_opened==true&&！clickover.hasClass（“数据切换”）&&clickover.parents（'.btn link'）。长度==0）{
$（“button.data toggle”）。单击（）；
}
});
});

但当然没有运气。任何暗示都将不胜感激

更新

---

另一次尝试没有运气。

您可以使用以下方法：

//handling the hiding when clicking anywhere else in the document
$(document).mouseup(function(e)
{
    var container = $('.btn-link');
    if (container.has(e.target).length === 0) {
      // the closing function
    }
});

---

这就是我在Coffeescript for Bootstrap 4中使用非标准导航条所做的

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

所以基本上，除非你点击按钮或菜单，否则关闭菜单

---

注意：奇怪的是，在iOS上单击文本不会注册单击事件，也不会注册鼠标点击事件。但单击图像会触发事件。不知道如何解决此问题。

您应该花一点时间学习JQuery，不仅仅是针对这类问题，还针对HTML中遇到的许多其他问题。答案有什么不直观的在你的链接答案中提出？对我来说，这看起来很直观。也许我们可以帮助你解决更多问题。我也被JQuery和讨厌的Javascript弄糊涂了，但在学习之后，它意识到它非常强大，有点像它。我更喜欢咖啡脚本。接受本教程，谢谢Ahmad！我将使用的关闭函数的形式是什么？单击按钮时关闭按钮的属性是什么？@pebox11您可以添加jsFiddle作为示例吗please@pebox11what我应该在这个例子中看到。它只是一个按钮和一个文本，根本没有交互作用。这也是原始问题中描述的主要问题。Wh至少对于像我这样的初学者来说，这就是为什么我说jQuery一点都不直观的原因。。。

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')