Question

我是新的jQuery和boostrap。使用boostrap popover我已经为单个页面实现了多个弹出窗口。我的popover html和js脚本如下：

  <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                    Click me 1                                           
   </a> 
   <div class="popper-content hide profile-popover">
       This content place for click me 1 button
    </div>

     <a  data-toggle="popover" class="btn popper btn-default ">                                           
         Click me 2                                           
       </a> 
   <div class="popper-content hide profile-popover">
         This content place for click me 2 button
     </div>

js脚本：

<script>
$(document).ready(function(){
$('.popper').popover({
  placement: 'bottom',
container: 'body',
html: true,
content: function () {
    return $(this).next('.popper-content').html();
  }
 });
 });
</script>

Pop over工作正常但现在我正在尝试实现一个脚本，如果有人在popover内容之外点击，将隐藏我页面中所有打开的popover。

以下是我的完整代码段，请检查并告诉我如何在内容位置外单击时隐藏所有打开的popover。

＆＃13;

$(document).ready(function(){
   $('.popper').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});
});

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Popover</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover </h3>
                                 <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 1
                                           
                                 </a> 
                                   <div class="popper-content hide profile-popover">
                                             This content place for click me 1 button
                                    </div>

                                       <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 2
                                           
                                        </a> 
                                    <div class="popper-content hide profile-popover">
                                             This content place for click me 2 button
                                    </div>
 
</div>



</body>
</html>

＆＃13;

Answer 1

首先，确保所有弹出窗口都有一个额外的类名，您可以同时定位所有弹出窗口。然后，您可以使用此代码循环并隐藏它们。

$(document).mouseup(function (e) {
   var container = $('.popper-content');
   container.each(function() {
     if (container.is(e.target) || container.has(e.target).length === 0) {
      $(this).popover('hide');
     }
    });
 });

除非点击位于容器内，否则弹出窗口将被隐藏。

Answer 2

只需在文档 $（document）.ready 函数中添加以下代码，希望您的方面得到解决：

$(document).mouseup(function (e) {
  if(!($(e.target).hasClass("popover-content"))){
    $(".popover").popover('hide');
    }
});

我已将jQuery和html代码段附加如下：

＆＃13;

    $(document).ready(function(){
    $('.popper').popover({
      placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
      }
     });


    $(document).mouseup(function (e) {
          if(!($(e.target).hasClass("popover-content"))){
       		$(".popover").popover('hide');
    		}
     });




     });

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Popover</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3 class="popper-content dd">Popover </h3>
                                 <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 1
                                           
                                 </a> 
                                   <div class="popper-content hide profile-popover">
                                             This content place for click me 1 button
                                    </div>

                                       <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 2
                                           
                                        </a> 
                                    <div class="popper-content hide profile-popover">
                                             This content place for click me 2 button
                                    </div>
 
</div>

</body>
</html>

＆＃13;

运行并检查您的问题是否已解决。

jQuery / Bootstrap popover隐藏点击内容占位符div外部

2 个答案: