asp.net - Bootstrap 4.2.1 : subfolder page crash Navbar

Question

我有一个使用母版页的 ASP.NET 网站，并且某些页面正在从特定子文件夹加载。 使用 Bootstrap 4.0 一切正常。

但是现在，使用 Bootstrap 4.2.1，当我跳转到这些页面之一时，导航栏选项包含使用 class="nav-link dropdown-toogle" 的子菜单。坏了。

当我将鼠标放在下拉菜单上时，下面没有出现任何选项(未加载/显示相关菜单)。

我调查了发生这种情况的原因，发现 HREF(如果最初指向 #)现在显示“../#”，并且 Chrome 发送以下消息:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '../#' is not a valid selector.

所有其余代码完全相同。

代码如下:

<li Class="nav-item dropdown">
    <a runat="server" Class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
        <a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
        <a class="dropdown-item" href="/AdminActions/Fabricantes.aspx">Fabricantes</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
    </div>
</li>

当我进入子文件夹页面时，代码如下所示:

<li Class="nav-item dropdown">
    <a runat="server" Class="nav-link dropdown-toggle" href="../#" 

HREF 中 ../# 上方的注释

有趣的是:

1. 不使用任何下拉选项的命令选项具有 HREF="../"，但 Bootstrap 通常可以理解它们。
2. 具有下拉选项的命令选项(如上所示)具有 HREF="../#" (而不是仅“#”)，并且 Bootstrap 会向 DOM 发送错误并且不会打开相关菜单。

有什么解决办法吗？我提前表示感谢。

更新

与支持人员交谈，他们建议使用 data-target=#或者甚至将 ID 放入 dropdown-toogle类控制并用 data-target 引用它.

根本没有成功。看到 DOM，我可以看到，当加载内容页面(并且位于子文件夹中)时，HREF 发生变化，并且似乎使 Bootstrap 瘫痪...

更新2

我做了一个测试，将所有页面从子文件夹移动到主文件夹(客户端不接受的解决方案)，一切功能都像魅力一样。该问题与 Bootstrap 4.2.1 + ASP Materpages + SubFolder 中的页面有关。

按照下面的建议，我尝试了 HREF=#...但没有成功。

更新3

Siava 建议删除 runat=server 并更改一些链接，确保他在那里模拟问题作为解决方案。但是，不幸的是，我得到了以下结果:

您可以在上面看到 HREF 的问题已经消失，但问题仍然存在。

如果我们分析 Chrome 的错误，我们会看到以下内容:

如果您遇到并解决了这个问题，我将非常感谢您在此告知。

拥抱!

Answer 1

甚至可能是一个功能:)

尝试从下拉 anchor 中删除服务器端处理，因为使用它似乎会导致解析器认为“#”是母版页级别的资源，因此在其前面加上 ../提升一个级别。

<a class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>

这可以工作，因为目前您似乎没有对该标签进行任何服务器端处理。如果将来发生这种情况，您可以使用 NavigateUrl="#"相反:

<a runat="server" Class="nav-link dropdown-toggle" NavigateUrl="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>

希望这有帮助!

<小时/>

更新:

刚刚能够重现您的问题(母版页中的下拉菜单、从子文件夹中浏览页面、Bootstrap 4.2.1)并通过以下方法修复了该问题:

<li Class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" data-target="AdmFuncsDropDown" aria-haspopup="true" aria-expanded="false">Arquivos</a>
    <div class="dropdown-menu" id="AdmFuncsDropDown" aria-labelledby="navbarDropdown" >
        <a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
        <a class="dropdown-item" href="/AdminActions/Fabricantes.aspx">Fabricantes</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
    </div>
</li>

如果这不起作用，请尝试清除缓存(Ctrl + Shift + R)，否则还有其他部分或导致错误持续存在的错误。