Bootstrap 4.2.1: сбой страницы подпапки Navbar

Question

У меня есть веб-сайт ASP.NET, использующий мастер-страницы, и некоторые страницы загружаются из определенной подпапки. С помощью Bootstrap 4.0 все было в порядке.

Но теперь, при использовании Bootstrap 4.2.1, когда я перехожу на одну из этих страниц, опции NavBar, которые содержат подменю с использованием class="nav-link dropdown-toogle", не работают.

При наведении курсора мыши на раскрывающееся меню никакие параметры не отображаются (соответствующее меню не загружается / не отображается).

Я выясняю, почему это происходит, и увидел, что HREF (который, если первоначально указывать на #) показывает теперь "../#", и Chrome отправляет следующее сообщение:

Uncaught DOMException: не удалось выполнить '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 ...

ОБНОВЛЕНИЕ-2 * * тысяча пятьдесят-одна Я сделал тест, переместив все страницы из подпапки в основную папку (неприемлемое для клиента решение), и все работает как шарм. Проблема связана с Bootstrap 4.2.1 + ASP Materpages + Pages в SubFolder. И, как рекомендовано ниже, я снял HREF = # с попытки ... безуспешно. ДОПОЛНЕНО-3

Сиава порекомендовал удалить runat = server и изменить некоторые ссылки, убедившись, что он имитирует проблему либо в качестве решения. Но, к сожалению, у меня были следующие результаты:

Вы можете видеть выше, что проблема с HREF исчезла, НО проблема сохранилась.

Если мы проанализируем ошибки Chrome, мы увидим это:

Если вы столкнулись с этой проблемой и решили ее, я буду очень признателен за сообщение здесь.

Hugs!

Answer 1

Может быть даже функция:)

Попробуйте удалить обработку на стороне сервера из выпадающих якорей, так как при ее использовании парсер считает, что "#" - это ресурс на уровне вашей MasterPage, поэтому перед ним стоит ../ для повышения уровня.

<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 ), в противном случае есть какая-то другая часть или ошибка, которая делает ошибка сохраняется.