Javascript 如何设计动态菜单

基本上，我正在制作一个google drive esqe web应用程序，用于存储用户在应用程序中创建的笔记本和笔记

在“我的主屏幕”中，用户将看到他们所有的笔记本都被渲染出来，并且可以单击。当用户单击该项目时，该项目会高亮显示，并选中相应的复选框（我不知道为什么我们都有这两个复选框），然后在顶部会出现一个菜单栏，为用户提供对该笔记本/便笺执行操作的选项

菜单栏是应用程序范围内的导航栏，但菜单只针对主页。 问题在于某些菜单选项的功能。应用程序目前的运行方式是，用户可以选择多个项目，但这样做时某些菜单选项将消失（例如，打开将消失，因为我们一次只想打开一个便笺）。我目前不知道如何着手设计这个。主要是，我不知道如何跟踪突出显示的项目的数量（将提供下面突出显示的片段），也不知道如何在适当的时候让适当的菜单选项出现/消失。现在，我有一个包含所有菜单标题的menubar.ejs，它包含在导航栏中（），所有屏幕都可以访问它

MenuBar.ejs

<ul class="menu">
<li><a href="/home">Home</a></li>
<li><a href="#">Create</a></li>
<li><a href="/selectedNotebook">Open</a></li>
<li><a href="#">Download</a></li>
<li><a href="/share">Share</a></li>
<li><a href="#">Delete</a></li>
</ul>

虽然这可能不是最好的方法，但这是我当时唯一能想到的方法

---

我对所有这些语言都非常陌生，所以这对我来说是一项非常艰巨的任务。非常感谢任何帮助！希望我已经提供了足够的信息，但如果我没有提供，我会尽力指定更多信息或在需要的地方添加更多信息。

要获取所有高亮显示的项目，可以使用jquery选择器：

$('.highlighted'); // returns an array of hightlighted items
$('.highlighted').length; // number of highlighted items

这些问题有点模糊，但在设计方面，试着从视图/上下文的角度来考虑应用程序，如果我打开了一个便笺，应该可以看到什么

$('.highlighted'); // returns an array of hightlighted items
$('.highlighted').length; // number of highlighted items