Question

我的页面上有很多popover，我想点击下一个popover关闭之前打开的popover。

有效！但是当我再次点击上一个popover时，我必须点击两次！

我也想通过点击外面来关闭popover。

$('.triggerOverlay').popover({ 
html : true,
content: function() {
        var $this = $(this);
        var cont = $this.data('toggle');
        return $('#'+cont).html();
}});

以下代码用于关闭除当前

之外的所有弹出窗口

$('.triggerOverlay').on('click', function (e) {
    $('.triggerOverlay').not(this).popover('hide');
});

小提琴

https://jsfiddle.net/yasirhaleem/43qfkjtb/

Answer 1

这应该有效。将click事件侦听器添加到文档中，并始终隐藏您的弹出窗口如果事件目标是带有弹出窗口的锚标签之一，则切换它。还将trigger属性添加到设置为manual的弹出框选项中。

＆＃13;

$( document ).ready(function() {

  $('.triggerOverlay').popover({ 
    html : true,
    content: function() {
      var $this = $(this);
      var cont = $this.data('toggle');
      return $('#'+cont).html();
    },
    trigger: 'manual'
  });


  $(document).on('click', function (e) {
    // always hide them all.
    $('.triggerOverlay').popover('hide');
    // if e.target has a popover toggle it.
    if ($(e.target).hasClass('triggerOverlay')) {
      $(e.target).popover('toggle');
    }
  });

});

＆＃13;

.customoverlay{display:none;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a href="#" data-toggle="user-profile-overlay" class="triggerOverlay">button</a><br><br><br><br><br>
<div id="user-profile-overlay" class="customoverlay">content goes here</div>
<a href="#" data-toggle="user-profile-overlay1" class="triggerOverlay">button</a><br><br><br><br>
<div id="user-profile-overlay1" class="customoverlay">second content goes here</div>
<a href="#" data-toggle="user-profile-overlay2" class="triggerOverlay">button</a><br><br><br>
<div id="user-profile-overlay2" class="customoverlay">third content goes here</div>

＆＃13;

点击下一个

1 个答案: