Bootstrap 4 Popover 显示/隐藏 div答案

【问题标题】：Bootstrap 4 Popover show/hide divBootstrap 4 Popover 显示/隐藏 div
【发布时间】：2020-11-30 21:45:57
【问题描述】：

使用 Bootstrap 4，我设置了一个弹出框来显示一些 HTML 内容。在弹出框内，我想使用 jQuery 显示/隐藏带有其他内容的 div，但我无法让它显示隐藏的内容。

HTML

<div class="text-center">
    <button id="show-popover" type="button" class="btn btn-primary mt-5" data-toggle="popover">Click Me</button>
</div>
<!-- popover content -->
<div id="popover-content" class="d-none">
    <div class="card border-0">
        <div class="card-body">
            <a href="#" id="show-div">Show more content</a>
            <div id="hidden-content" class="d-none">
                div with more content...
            </div>
        </div>
    </div>
</div>

jQuery

$(function () {
    $('#show-popover').popover({
        container: 'body',
        html: true,
        placement: 'bottom',
        sanitize: false,
        content: function() {
            return $('#popover-content').html();
        }
    })
});

$('#show-div').click(function(){
    $('#hidden-content').toggle();
});

Link to CodePen

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-popover

【解决方案1】：

当您将 ie : $('#popover-content').html() 动态附加到弹出框时，您需要将点击处理程序绑定到某个静态元素并使用 class 选择器而不是 id 来获取 hidden-content 的引用，使用 $(this).parent().find('.hidden-content').toggle();隐藏和显示相同。

演示代码：

$(function() {

  $('#show-popover').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
      return $('#popover-content').html();
    }

  })

});


//call handler like below ..
$(document).on('click', '.card-body > #show-div', function() {
  //then use .find to get the div and then show/hide
  $(this).parent().find('.hidden-content').toggle();

});

.d-none {
  display: none
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<div class="text-center">

  <button id="show-popover" type="button" class="btn btn-primary mt-5" data-toggle="popover">Click Me</button>

</div>

<!-- popover content -->

<div id="popover-content" class="d-none">
  <div class="card border-0">
    <div class="card-body">
      <a href="#" id="show-div">Show more content</a>
      <div class="hidden-content d-none">
        div with more content...
      </div>
    </div>
  </div>
</div>

【讨论】：