Question

我的html中有按钮和ul列表。最初我的ul列表最初处于隐藏状态。谁能告诉我如何使用引导程序弹出窗口切换ul列表（隐藏和显示）并提供位置或数据放置

<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title">Popover</button>



<div id="myPopover" class="hide">
    This is a popover list:
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>

Answer 1

由于使用html意味着覆盖了title属性，因此需要一种将内容绑定到html元素的方法。

在这里，我正在使用另一个data-属性（data-htmlcontent），其中包含您希望在工具提示中看到的隐藏元素内部HTML的ID。注意在选项对象中使用html:true

这是完成您所需要的一种方法：

$(function() {
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
      let contentID = $(this).data('htmlcontent');
      return $(contentID).html();
    }
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary" data-toggle="popover" data-htmlcontent='#myPopoverContent' >Popover</button>

<div id="myPopoverContent" hidden>
  This is a popover list:
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

单击使用bootstrap4的按钮切换列表（ul）弹出窗口

1 个答案: