Bootstrap 4 个弹出框 show/hide div

Question

使用 Bootstrap 4，我设置了一个弹出框来显示一些 HTML 内容。在弹出窗口中，我想使用 jQuery show/hide 一个带有附加内容的 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

Answer 1

因为你追加即：$('#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>

Bootstrap 4 个弹出框 show/hide div

Bootstrap 4 Popover show/hide div

jquery

twitter-bootstrap

bootstrap-popover