Flask - Bootstrap Navbar Dropdown 在子页面上不起作用答案

【问题标题】：Flask - Bootstrap Navbar Dropdown doesn't work on sub pageFlask - Bootstrap Navbar Dropdown 在子页面上不起作用
【发布时间】：2020-11-01 13:44:56
【问题描述】：

我在 base.html 中有一个带有下拉链接的可用导航栏。下拉菜单适用于任何页面，某些子页面下的页面除外。

作品：

索引/
仪表板/
用户/user123/

不起作用（单击“下拉菜单”不起作用）：

projects/project_a/project_1

导航条码：

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="myDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown Menu
    </a>
    <div class="dropdown-menu" aria-labelledby="myDropdown">
      <a class="dropdown-item" href="{{ url_for('main_bp.option_1_page') }}">Option 1</a>
      <a class="dropdown-item" href="{{ url_for('main_bp.option_2_page') }}">Option 2</a>
    </div>
  </li>

有几个发布的问题似乎有同样的问题，但没有解决这个问题。我尝试过的事情：

已验证引导程序正在相关子页面上呈现（检查 > 网络 > js）
删除导航栏代码中的 href="#"
确认将鼠标悬停在“下拉菜单”导航栏链接上时，所有页面上的网址都相同

我在整个代码中使用url_for 模式，所以我的直觉是这不是路径问题（尽管我猜可能是）。它看起来像/current_page#

【问题讨论】：

标签： javascript html twitter-bootstrap flask bootstrap-4

【解决方案1】：

在您的项目中添加 bootstrap.min.js 和 popper.min.js 库

        ex:
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

【讨论】：

谢谢，但我已经有了引导程序，如果下拉菜单已经呈现在其他页面上，我不确定为什么我需要 popper

【解决方案2】：

这是解决方案：

在未呈现下拉列表的页面中，我在脚本块中调用了两次{{ super() }}。删除其中一个会导致下拉菜单正常工作。
我可以通过添加额外的{{ super() }} 调用来重现以前工作页面中的错误

我对 super() 有基本的了解，但是如果有人能指出为什么调用它两次会产生这种效果，那会很有趣。

【讨论】：