点击外部折叠Bootstrap按钮

Question

我正在使用这段代码，几乎是从bootstrap文档中直接获取的，用于为按钮（我将按钮转换为链接）实现简单的折叠行为：

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

现在，我想做的是当用户点击按钮外部时能够关闭文本。我知道这个问题在stackoverflow上被问了很多次，但是对于像我这样的初学者来说，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>

但是，当然没有运气。非常感谢任何提示！

更新

另一次尝试没有成功在这里.

- pebox11

---

你应该花点时间学习 JQuery，不仅为了解决这种类型的问题，还有许多其他在 HTML 中遇到的问题。 - Jocko

你链接的答案中有什么不直观的地方？ 对我来说看起来非常直观。 也许我们可以帮助您解决这个问题，这可能会在处理更多问题时有所帮助。 - Steve

我曾经也被JQuery和Javascript搞得很困惑，甚至讨厌它们，但是在学习之后我意识到它们非常强大，而且有点喜欢它们。使用Coffeescript更加喜欢它们。可以参考这个教程：https://www.w3schools.com/jquery/default.asp - Chloe

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

- AhmadAssaf

---

谢谢Ahmad！我应该使用什么形式的关闭函数？点击按钮时关闭的属性是什么？ - pebox11

@pebox11，您能否请在您的示例中添加jsFiddle？谢谢。 - AhmadAssaf

@pebox11 我在这个例子中应该看到什么？它只有一个按钮和一段文字，完全没有交互。 - AhmadAssaf

这正是原问题所描述的主要问题。我做错了什么，却看不到任何交互？这就是为什么我说jQuery对于像我这样的初学者来说根本不直观... - pebox11

Answer 2

这是我在使用非标准导航栏的Bootstrap 4中使用Coffeescript的方法。

  $(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上点击文本不会注册点击事件，也不会注册鼠标抬起事件。但是点击图像确实会触发事件。不知道如何解决这个问题。

- Chloe