Bootstrap 4.2.1:子文件夹页面崩溃导航栏

Question

我有一个使用Masterpages的ASP.NET网站,一些页面正在从特定的子文件夹加载.使用Bootstrap 4.0一切正常.

但是现在,使用Bootstrap 4.2.1,当我跳转到其中一个页面时,包含子菜单的NavBar选项class="nav-link dropdown-toogle"被破坏了.

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

我调查它为什么会发生,我看到HREF(如果最初指向#)现在显示"../#"并且Chrome发送以下消息:

未捕获的DOMException:无法在'Document'上执行'querySelector':'.. /#'不是有效的选择器.

所有剩下的代码完全相同.

代码如下所示:

<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发送错误并且不会打开相关菜单.

有什么提示要解决吗？我提前感谢.

UPDATE

与支持人员讨论他们建议使用data-target=#甚至将ID放入dropdown-toogle类控件并引用它data-target.

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

UPDATE-2

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

按照下面的建议,我试了一下HREF =#,但根本没有成功.

UPDATE-3

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

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

如果我们分析Chrome的错误,我们会看到:

如果你已经面对并解决了这个问题,我将非常感谢你们.

拥抱!

Answer 1

甚至可能是一个功能:)

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

<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，否则有其他部分或错误导致错误持续存在。