单击外部时折叠引导按钮答案

【问题标题】：Collapse bootstrap button on click outside单击外部时折叠引导按钮
【发布时间】：2015-11-18 04:58:18
【问题描述】：

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

<button class="btn btn-link" type="button" data-toggle="collapse"     data-target="#collapseTree" aria-expanded="false"         aria-controls="collapseTree">
     <b>click me</b>
             </button>
                 <div class="collapse" id="collapseTree">
                       <div class="well">
                           <h6>Example text goes here</h6>
                       </div>
                 </div>

现在，我想做的是能够在用户单击按钮外部时关闭文本。我知道在堆栈溢出中被多次询问，但 jQuery 一点也不直观！至少对于像我这样的初学者来说，所以我真的无法调整这个 SO answer 上提出的任何解决方案来获得所需的行为。

例如我正在使用这个脚本（从here借来的概念来尝试控制上述代码的外部点击行为：

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

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

更新

又一次没有运气的尝试here。

【问题讨论】：

你应该花点时间学习一下JQuery，不仅仅是为了这类问题，还有很多其他你会在HTML中遇到的问题。
链接答案中提出的答案有什么不直观的地方？对我来说它看起来很直观。也许我们可以帮助您解决更多问题
我也被 JQuery 弄糊涂了，讨厌 Javascript，但是在学习之后发现它非常强大并且有点喜欢它。我更喜欢 Coffeescript。学习本教程w3schools.com/jquery/default.asp

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您可以使用以下内容：

//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
    }
});

【讨论】：

谢谢艾哈迈德！我将使用什么形式的关闭函数？单击时关闭按钮的属性是什么？
@pebox11 你可以为你的例子添加jsFiddle吗
@pebox11我应该在这个例子中看到什么。它只是一个按钮和一个文本，根本没有交互
这也是原始问题中描述的主要问题。我在做什么错并且看不到互动？这就是为什么我说 jQuery 一点也不直观，至少对于像我这样的初学者来说......

【解决方案2】：

这就是我在 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 上点击文本不会注册点击事件，也不会注册 mouseup 事件。但是，单击图像会触发事件。不知道如何解决这个问题。

【讨论】：