Question

我正在使用这个代码，它几乎从引导程序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。

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

Answer 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上点击文字并不会注册点击事件，也不会注册鼠标事件。点击图像会触发事件。不知道如何解决这个问题。

单击外部折叠引导按钮

2 个答案: