如何在JavaScript页面加载后保持子菜单打开

Question

我几乎完成了我的工作，我的客户端要求在用户单击菜单中的项目并设置活动颜色时保持子菜单打开。这个想法是更好的定位，当用户实际上是。在React应用程序中，这不会是问题，因为整个应用程序就像单个页面一样工作。在这种情况下，我决定只使用HTML/JS作为我的挑战。

是否有可能在加载新页面时保持菜单打开/再次打开菜单?

我试着从这个应用程序像单页应用程序的一些教程，如"加载页面不刷新"等等，但都不起作用。

<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
<a
href="/pages/matice/determinanty.html"
id="matice/determinanty"
onClick="reply_click(this.id)"
class="sub-item">
Determinanty
</a>
<a
href="/pages/matice/inverzni-matice.html"
id="matice/inverzni-matice"
onClick="reply_click(this.id)"
class="sub-item">
Inverzní matice
</a>
<a
href="/pages/matice/maticove-rovnice.html"
id="matice/maticove-rovnice"
onClick="reply_click(this.id)"
class="sub-item">
Maticové rovnice
</a>
<a
href="/pages/matice/vlastni-cisla-a-vektory.html"
id="matice/vlastni-cisla-a-vektory"
onClick="reply_click(this.id)"
class="sub-item">
Vlastní čísla a vektory
</a>
</div>
</div>
</div>

Answer 1

您可以尝试在您的页面加载window.location.href，并根据有条件地添加样式类<div class="<%= 'yourStyleClass' if @url== 'urURL' %>">设置有效颜色

Answer 2

可以使用AJAX调用该页面。但这听起来不像是你想要的。javascript中的另一种方法是在页面加载时获取当前的window.location.href，然后将类名注入相关节点，并使该类的css可见并突出显示。

如果你使用像jQuery这样的库，这应该不会太难实现。