Question

我试图在点击任何其他位置时隐藏弹出窗口，但弹出窗口和按钮

它适用于第一种情况，但在它隐藏之后需要两次点击才能显示。我怎么能只用一次点击就可以做到。

$('body').on('click', function(e) {

  if ($(e.target).data('toggle') !== 'popover' &&
    $(e.target).parents('.feedsPopup').length == 0 &&
    $(e.target).parents('.popover.in').length === 0)
    $('.feedsPopup').popover('hide');
});

$(document).on('show.bs.popover', '.feedsPopup', function() {

  var popup = $(this);

  $(popup).attr('data-content', 'coooooooool');

});




$('#myid').html('<button type="button" class="btn btn-secondary feedsPopup"  data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button><button type="button" class="btn btn-secondary feedsPopup"  data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>')

$('.feedsPopup').popover();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

<body style="border:1px solid red;">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div id="myid"></div>

</body>

而且我还试图隐藏所有其他弹出窗口，只显示我正在$('.feedsPopup').popup('hide');然后$(this).popup('show'); click method of feedsPopup，但如果我这样做，它会隐藏当前弹出窗口也是如此没有弹出窗口。

Answer 1

为什么不简化它并触发按钮点击如下：

var popup = [{
  id: 'button1',
  open: false
}, {
  id: 'button2',
  open: false
}];

$('body').on('click', function(e) {
  if ($(e.target).data('toggle') !== 'popover' && !$(e.target).hasClass('popover-content')) {
    for (var i in popup) {
      if (popup[i].open) {
        popup[i].open = false;
        $("#" + popup[i].id).trigger('click')
      }
    }
  }
});

$(document).on('show.bs.popover', '.feedsPopup', function() {
  for (var i in popup) {
    if ($(this).attr('id') == popup[i].id) {
      popup[i].open = true;
      console.log(popup[i].open)
    }
  }
  $(this).attr('data-content', 'coooooooool');
});

$('#myid').html('<button type="button" class="btn btn-secondary feedsPopup"  data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button><button type="button" class="btn btn-secondary feedsPopup"  data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>')

$('button').each(function(i) {
  $(this).attr('id', popup[i].id)
})

$('.feedsPopup').popover();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

<body style="border:1px solid red;">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div id="myid"></div>

</body>

Answer 2

我找到了一个简单的解决方案：

<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
</head>
<body style="border: 1px solid red;">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="myid"></div>

</body>
<script>
    $('body').on('click', function (e)
    {

        if ($(e.target).data('toggle') !== 'popover' &&
          $(e.target).parents('.feedsPopup').length == 0 &&
          $(e.target).parents('.popover.in').length === 0)
        {
            $('.feedsPopup').popover('hide');
            $('.feedsPopup').removeAttr('pshow');
        }
    });

    $(document).on('show.bs.popover', '.feedsPopup', function ()
    {

        var popup = $(this);
        popup.attr('pshow', 'pshow');
        $(popup).attr('data-content', 'coooooooool');

    });

    $('#myid').html('<button type="button" class="btn btn-secondary feedsPopup"  data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button><button type="button" class="btn btn-secondary feedsPopup"  data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>')

    $('.feedsPopup').popover();

    $('.feedsPopup').one('click', function ()
    {
        $(this).on('click', function ()
        {
            if ($(this).attr('pshow') != 'pshow')
            {
                $(this).click();
            }
        });
    });
</script>
</html>

Answer 3

将其添加到按钮data-trigger="focus"的定义中，并且无需

   $('body').on('click', function(e) {    
     if ($(e.target).data('toggle') !== 'popover' &&
       $(e.target).parents('.feedsPopup').length == 0 &&
       $(e.target).parents('.popover.in').length === 0)
       $('.feedsPopup').popover('hide');
   });

Working fiddle

修改： reference

Bootstrap弹出窗口无法正常工作

3 个答案: