无法通过点击facebook帖子中的三个点来触发弹出窗口



我在我的django模板的帖子列表,并希望把三个点在每个帖子,并希望一个弹出窗口得到触发每当我点击三个点和弹出窗口应该有可点击的选项,如删除和复制链接。你可以看看instagram和facebook上的帖子,找到更好的主意。提前谢谢。

<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></div>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the 
popover"><span>&#8942;</span></a>
<style>
span {
content: "22EE";
}
</style>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>

我试过这个代码,但选项是不可点击的,而且我无法在弹出窗口

显示多个选项

首先,如果可能的话,我建议您使用最新版本的bootstrap。在写这篇文章的时候,这是bootstrap 5.

你可能想要的不是弹出窗口,而是下拉菜单。也许你应该花点时间阅读引导文档。关于下拉菜单的文档可以在这里找到:https://getbootstrap.com/docs/5.1/components/dropdowns/

你在bootstrap 5中的例子可以像这样:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Popover Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn-group dropend">
<button type="button" class="btn" data-bs-toggle="dropdown" aria-expanded="false">
&#8942;
</button>

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Copy Link</a></li>
</ul>
</div>
</body>
</html>

最新更新