单击按钮 切换列表 (UL) 弹出窗口 使用 bootstrap4.

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>