Bootstrap 5 下拉菜单返回错误 Uncaught TypeError: this._menu is undefined答案

【问题标题】：Bootstrap 5 dropdown menu returns error Uncaught TypeError: this._menu is undefinedBootstrap 5 下拉菜单返回错误 Uncaught TypeError: this._menu is undefined
【发布时间】：2022-08-08 03:40:33
【问题描述】：

我有一个下拉菜单定义如下：

<div class=\"row d-flex justify-content-left\">
    <div class=\"search-box col-md-8 col-lg-7 col-xl-6\">
        <form action=\"/{{ $page->formAction }}\">
            <div class=\"input-group\">
                <div class=\"input-group-prepend\">
                    <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownSubNav\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
                        Portfolios & collections...
                    </button>
                    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownSubNav\">
                        <li>
                            @foreach ($allPortfolios as $portfolio)
                            <a class=\"dropdown-item\" href=\"{{ $portfolio->href }}\">{{ $portfolio->name }}</a>
                            @endforeach
                        </li>
                    </div>
                </div>
                <input type=\"text\" class=\"form-control\" name=\"s\" value=\"{{ @$page->search }}\">
                <div class=\"input-group-append\">
                    <button class=\"btn btn-secondary\" type=\"submit\"><i class=\"fa fa-search\"></i></button>
                </div>
                {!! $page->map.$page->portfolioImageSelected !!}
            </div>
            &nbsp;&nbsp;
        </form>
    </div>
</div>

我已经检查了很多关于这个主题的帖子，我的情况是不同的，我正在拉扯我的头发，试图弄清楚为什么它与这个portfololio 一起工作，但不是与这个one 一起工作。

两个页面之间的唯一区别是显示的图像数量，但生成的下拉菜单代码在两个页面中完全相同。

这是下拉菜单工作的第一页生成的 html 代码：

<div class=\"row d-flex justify-content-left\">
    <div class=\"search-box col-md-8 col-lg-7 col-xl-6\">
        <form action=\"/portfolio\">
            <div class=\"input-group\">
                <div class=\"input-group-prepend\">
                    <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownSubNav\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
                        Portfolios & collections...
                    </button>
                    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownSubNav\">
                        <li>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=bestof\"> • Best Of</a>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=utopia\"> • Utopia</a>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=bw\"> • Black &amp; White</a>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=ethereal\"> • Ethereal</a>
                            ...
                        </li>
                    </div>
                </div>
                <input type=\"text\" class=\"form-control\" name=\"s\" value=\"\">
                <div class=\"input-group-append\">
                    <button class=\"btn btn-secondary\" type=\"submit\"><i class=\"fa fa-search\"></i></button>
                </div>
                <button id=\"map\" class=\"btn btn-secondary\" type=\"button\" onclick=\"window.location.href=\'/map?c=ethereal&p=main&r=4&m=images\'; return false;\"><i class=\"fa fa-map\"></i></button><button id=\"mainHeartButton\" style=\"visibility:hidden; display:none;\" class=\"btn btn-secondary\" type=\"button\" onclick=\"window.location.href=\'/portfolio?s=cookie\'; return false;\"> <img id=\"mainHeart\" src=\"./assets/icons/heart0.png\" class=\"icon20\" title=\"spacer\"></button>
            </div>
            &nbsp;&nbsp;
        </form>
    </div>
</div>

在它不起作用的第二页中

<div class=\"row d-flex justify-content-left\">
    <div class=\"search-box col-md-8 col-lg-7 col-xl-6\">
        <form action=\"/portfolio\">
            <div class=\"input-group\">
                <div class=\"input-group-prepend\">
                    <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownSubNav\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">
                        Portfolios & collections...
                    </button>
                    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownSubNav\">
                        <li>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=bestof\"> • Best Of</a>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=utopia\"> • Utopia</a>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=bw\"> • Black &amp; White</a>
                            <a class=\"dropdown-item\" href=\"/portfolio?p=main&amp;c=ethereal\"> • Ethereal</a>
                            ...
                        </li>
                    </div>
                </div>
                <input type=\"text\" class=\"form-control\" name=\"s\" value=\"\">
                <div class=\"input-group-append\">
                    <button class=\"btn btn-secondary\" type=\"submit\"><i class=\"fa fa-search\"></i></button>
                </div>
                <button id=\"map\" class=\"btn btn-secondary\" type=\"button\" onclick=\"window.location.href=\'/map?c=ethereal&p=main&m=images\'; return false;\"><i class=\"fa fa-map\"></i></button><button id=\"mainHeartButton\" style=\"visibility:hidden; display:none;\" class=\"btn btn-secondary\" type=\"button\" onclick=\"window.location.href=\'/portfolio?s=cookie\'; return false;\"> <img id=\"mainHeart\" src=\"./assets/icons/heart0.png\" class=\"icon20\" title=\"spacer\"></button>
            </div>
            &nbsp;&nbsp;
        </form>
    </div>
</div>

我看到的唯一区别是底部的链接是完全正常的。

如果有人能指出我解决这个问题的正确方向，我将不胜感激。

您安装了哪个引导程序版本？
最新的 5.0.2 (cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/…)
我比较了两个页面中的两个元素，我看到在第二页中你有一个<a href=\"/portfolio?p=main&c=ethereal\">3次，我没有得到那个部分，有什么理由有这个链接3次？顺便说一下，您将按钮包裹在一个标签也许这就是你出错的原因
@mmh4all 我没有看到您上面提到的链接的 3 个实例，也没有看到按钮周围的 <a> 标记...我查看了页面工作和不工作的两个源代码。你能解释一下你在哪里看到的吗？
@Paule Godard 我使用开发工具从两个页面复制了两个元素，第二个似乎很奇怪，我猜您正在使用 html 模板引擎为您的页面结构添加一些逻辑，使用开发工具检查您的元素，您将明白了吗

标签： javascript bootstrap-4 drop-down-menu

【解决方案1】：

当我从开发工具复制它时，您的元素看起来像这样，您可能会检查原因，当您有rurl中的参数，我希望这会引导您找到解决方案

<div class="input-group-prepend"><a href="/portfolio?p=main&amp;c=ethereal">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownSubNav" data-bs-toggle="dropdown" aria-expanded="false">
    Portfolios &amp; collections...
  </button>
  </a><div class="dropdown-menu" aria-labelledby="dropdownSubNav"><a href="/portfolio?p=main&amp;c=ethereal">
    </a><li><a href="/portfolio?p=main&amp;c=ethereal">
                      YOUR A TAGS HERE................
                    </li>
  </div>
</div>

【讨论】：

我完全理解，如果代码看起来像那样，那将无法正常工作。但是我不明白为什么我确实看到了完全不同的东西。正如我所说，我在 mac 上使用最新版本的 firefox，最新版本的 safari 以及歌剧......它们都没有显示你所看到的。我完全不解！
@PaulGodard 也许您必须从托管平台清除缓存
我在 Firefox 中做到了这一点：清除站点的缓存和站点数据/cookies……仍然一样。

【解决方案2】：

问题解决了。这是一个锚标记，在第二页中没有正确关闭。很抱歉浪费您的时间，但感谢您的帮助。

为什么你看到不同的代码仍然是个谜！

【讨论】：

【解决方案3】：

我有这个问题。我注意到如果按钮和下拉目标位于 d-flex 内，则会发生此错误。但是，如果两者都在“行” div 内，则此错误会消失，并且下拉菜单可以正常工作。

此外，下拉目标（div 或 ul）必须紧跟在下拉按钮之后。

【讨论】：