Я пытаюсь создать адаптивную навигационную панель, которая в мобильном режиме отображается в виде значка гамбургера, который загружает меню аккордеона. В целом все прошло хорошо, но я столкнулся с ошибкой, когда пользователь покидает мобильную версию и входит в настольную версию.
Когда пользователь раскрывает аккордеон и переключается на настольную версию, соответствующие вкладки все еще открыты и действуют как элементы аккордеона.
Несколько вещей, которые я попробовал, - это переключение классов с помощью функции onResize, чтобы удалить класс аккордеона из панели навигации. Это только усугубляло ситуацию, не только не работало, но и когда пользователь заходил в настольную версию, навигационная панель по-прежнему действовала так, как будто она была в мобильной версии, добавляя пустое пространство, где остальная часть навигационной панели должна была отображаться. было.
Я также попытался перезагрузить страницу, используя функцию onResize. Это сработало немного лучше, так как обновляет и закрывает все вкладки, однако после перезагрузки вы все еще можете увидеть пробел, добавленный до полного обновления страницы.
<nav class="navigation navigation-multiple" id="navigation-main" data-toggler=".navigation-show">
<ul class="accordion navigation-menu margin-bottom-medium" data-accordion data-multi-expand="true" data-allow-all-closed="true">
<li class="nav-link-with-sub" data-accordion-item>
@Html.ActionLink("Buy", "Buy", "Home", new { }, new { @class = "nav-
link accordian-title" })
<ul class="navigation-menu-sub accordion-content" data-tab-content>
<li>@Html.ActionLink("How to Buy", "Buy", "Home", new { }, new {
@class = "nav-link" })
</li>
</ul>
</li>
</ul>
</nav>
Есть ли что-нибудь еще, что я могу попробовать исправить эту ошибку, чтобы обеспечить более удобный для пользователя опыт?