崩溃引导按钮在外面点击

Collapse bootstrap button on click outside

本文关键字：在外面 按钮 崩溃      更新时间：2023-09-26

我正在使用这段代码，它几乎是从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>

现在，我要做的是能够关闭文本时，用户单击按钮外面。我知道这在堆栈溢出中被问了很多次，但是jQuery一点也不直观!至少对于像我这样的初学者来说是这样的，所以我真的无法适应这个so答案中提出的任何解决方案来获得期望的行为。

例如，我使用这个脚本(从这里借来的概念，试图控制上面代码的外部点击行为:

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

但当然没有运气。如有任何提示，不胜感激!

更新

您可以使用以下命令:

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

这就是我在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上点击文本不会注册一个点击事件，也不会注册一个鼠标上升事件。不过，点击图像会触发5个事件。

相关文章：