无法通过单击 Facebook 帖子中的三个点来触发弹出框答案

【问题标题】：Not able to a make a popover which gets triggered by clicking on the three dots like in facebook posts无法通过单击 Facebook 帖子中的三个点来触发弹出框
【发布时间】：2021-10-25 06:34:08
【问题描述】：

我的 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>

我尝试了这段代码，但选项不可点击，而且我无法在弹出窗口中显示多个选项

【问题讨论】：

你可以这样做：$(document).on('click','.popover .popover-content',function(){})

标签： javascript html jquery css bootstrap-4

【解决方案1】：

首先，如果可能，我建议您使用更新版本的引导程序。在撰写本文时，这是引导程序 5。

您可能想要的不是弹出框，而是下拉列表。也许您应该花一些时间阅读引导文档。您可以在此处找到有关下拉列表的文档：https://getbootstrap.com/docs/5.1/components/dropdowns/

您在引导程序 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>

【讨论】：

但实际上这些选项仍然不可点击。如果我单击“弹出框内的某些内容”，则不会发生任何事情。另外，如何在弹出窗口中显示多个选项，例如“删除”和“复制链接”。
现在我了解您想要实现的目标。 bootstraps popover 仅用于显示附加信息。你想要的是一个菜单或下拉菜单，因为它在引导程序中被调用。我将编辑我的答案。